jQuery 移除元素后的动画

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

也许你可以用这个。理解有误请指正

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

Answer 2

尝试以下操作：

$("#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

Answer 3

使用转换，更好。

$("#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 4

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

你的根本问题是"The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page."所以剩下的被选元素跳到中心。而且您无法转换为显示：none。所以你需要找到一个你可以制作动画的属性，比如我在这里使用的"left"。

[顺便说一句，那里有一些额外的代码，因为我正在测试动画 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>

jQuery 移除元素后的动画

jQuery animation after removing elements

javascript

css

jquery

transition