jQuery animation after removing elements

Question

I have the following HTML and 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;
}

The h3 elements are displaying inline and centered. I have the following code in jQuery that when you click an h3 element, the other elements fade out. It works well to remove the elements, but once they disappear, the selected element just suddenly flashes into the center (which is where I want it) but is there a way to animate this? Make it a smoother transition?

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

Answer 1

Try the following:

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

The callback function is called once the first animation is complete. You can nest the functions for a sequence animation.

Update:

Here are better examples for chaining animations: Chaining jQuery animations that affect different elements

Answer 2

To answer your question about smoothly transitioning the selected element to the center try the below code.

Your fundamental problem is that "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." And so the remaining selected element jumps to the center. And you cannot transition to display: none. So you need to find a property you can animate, like "left" which I have used here.

[As an aside there is some extra code there because I was testing the ability to animate flex "order" but it doesn't work at this time on Edge, and untested on other browsers. You do not need the order properties.]

Hope this helps.

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

Use transition, much better.

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

May be you can use this. correct me if i am wrongly understood.

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