Question

我有以下HTML和CSS：

<div id="categories">
        <h3 id="sports">Sports</h3>

        <h3 id="videogames">Video Games</h3>

        <h3 id="music">Music</h3>

        <h3 id="web">Web</h3>
</div>

#categories {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

#categories > h3 {
    display: inline;
}

h3元素显示为内联和居中。我在jQuery中有以下代码，当您单击h3元素时，其他元素会淡出。它可以很好地去除元素，但一旦它们消失，所选元素就会突然闪现到中心（这就是我想要的地方），但是有没有办法动画这个？让它过渡更顺畅吗？

$("#categories h3").click(function(){
    if(this.id == "sports"){
        $("#videogames").fadeOut(500);
        $("#music").fadeOut(500);
        $("#web").fadeOut(500);
    }
})

Answer 1

更好地使用转换。

$("#categories h3").click(function(){
    if(this.id == "sports"){
        $("#videogames, #music, #web").css({opacity: 0});
    }
});

#categories {
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

#categories > h3 {
    display: inline;
    transition: opacity .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
        <h3 id="sports">Sports</h3>

        <h3 id="videogames">Video Games</h3>

        <h3 id="music">Music</h3>

        <h3 id="web">Web</h3>
</div>

Answer 2

可能你可以使用这个。如果我被错误理解，请纠正我。

if(this.id == "sports"){
    $("#videogames").fadeOut(500);
    $("#music").fadeOut(500);
    $("#web").fadeOut(500);
    $("#sports").fadeOut(500);
    $("#sports").fadeIn(500);
  }

Answer 3

要回答有关将所选元素平滑过渡到中心的问题，请尝试以下代码。

你的根本问题是“.fadeOut（）方法动画匹配元素的不透明度。一旦不透明度达到0，显示样式属性设置为无，因此元素不再影响页面的布局。 “因此剩下的选定元素会跳转到中心。并且您无法转换为display：none。所以你需要找到一个你可以动画的属性，比如我在这里使用的“左”。

[除此之外还有一些额外的代码，因为我正在测试动画flex“order”的动画能力，但它现在在Edge上不起作用，而在其他浏览器上未经测试。您不需要订单属性。]

希望这有帮助。

$("#categories h3").click( function() {

    var thisID = this.id;

    $.each( $("#categories h3"), function (index, val) {

        if (thisID == val.id) {

            var containerWidth = $("#categories").width();
            var thisWidth = val.getBoundingClientRect().width;
            var thisComputedLeft = val.getBoundingClientRect().left;
       
            var adjustLeft = (containerWidth / 2) - thisComputedLeft - (thisWidth / 2);

            // to center the clicked element
            $(this).css({ left: adjustLeft  });

        }
        else   $(val).css({opacity: 0}); 
   });
});

#categories {
  position: relative;

  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  justify-content: space-around;
  align-content:  center;

  width: 100%;
  height: 100%;
  //margin: 0 auto;
}

#categories > h3 {
     cursor: pointer;
     position: relative;
     left: 0;
     width: auto;

     transition: all 0.5s ease, opacity 0.3s;
     // transition: opacity 0.3s;
}

#sports     { order: 1; }
#videogames { order: 2; }
#music      { order: 3; }
#web        { order: 4; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
        <h3 id="sports">Sports</h3>

        <h3 id="videogames">Video Games</h3>

        <h3 id="music">Music</h3>

        <h3 id="web">Web</h3>
</div>

Answer 4

尝试以下方法：

$("#categories h3").on('click', function(){
    if(this.id == "sports"){
        $("#videogames").fadeOut(500, function(){
            $("#music").fadeOut(400, function(){
                $("#web").fadeOut(300, function(){
                     $("#sports").fadeIn(400);
                });
            });
        });
     }
 });

第一个动画完成后，将调用回调函数。您可以嵌套序列动画的函数。

更新

以下是链接动画的更好示例：Chaining jQuery animations that affect different elements

删除元素后的jQuery动画

4 个答案: