滑动和淡入div元素

Question

I am trying to animate a div element (slide and fade) with a button click. At first, the element is not visible to a user. When the button is clicked, it will slide to right and fade in. Once the button is clicked again, it will slide to left and fade out. I come up with two solutions, with css and with JQuery.

In the first one, I used JQuery. You can find the example in this JSFiddle 1 .

<button id="my-button">Click me!</button>
<div id="my-modal"></div>

#my-modal {
    opacity: 1;
    position: fixed;
    top: 50px;
    left: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: red;
}

$("#my-button").click(function () {
    var $modal = $("#my-modal");
    $modal.stop(true, true).animate({
        left: "toggle",
        opacity: "toggle"
    }, 1000);
});

Here, everything seems working but it does directly opposite of what I want. It first fades out, and with the second click, it fades in. It is because that the opacity of the element is 1, but if I turn it to 0, nothing happens.

Secondly, I tried to do that with css animation by using key-frames (changing opacity from 0 to 1) but it has also problem. It starts the animation exactly the way I want. However, when I click the button again, it disappears immediately. Here is the JSFiddle 2 .

<button id="my-button">Click me!</button>
<div id="my-modal"></div>

    #my-modal {
    opacity: 0;
    position: fixed;
    top: 50px;
    left: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: red;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.move-my-modal {
    -moz-transform: translate(250px, 0px);
    -webkit-transform: translate(250px, 0px);
    -ms-transform: translate(250px, 0px);
    -o-transform: translate(250px, 0px);
}
.animate-opacity {
    -webkit-animation: toggle-opacity 1s ease;
    -moz-animation: toggle-opacity 1s ease;
    -o-animation: toggle-opacity 1s ease;
    animation: toggle-opacity 1s ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes toggle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

$("#my-button").click(function () {
    var $modal = $("#my-modal");
    $modal.toggleClass("move-my-modal");
    $modal.toggleClass("animate-opacity");
});

To this end, I have these questions;

1) What are the problems with these two approaches? Is there something that I missed or forgot to use? How can I correct them to meet the requirements that I mentioned at the beginning.

2) Which one is the better way to make this action? Is there any cons or pros of these approaches?

3) Is there any other way to make this action? I am new on this area and I might not notice a simpler way.

Answer 1

You can toggle an .active class to the element and use CSS transitions.

This way, if the browser is old enough to not support animations, it will still work but it won't slow down computers that do not handle animations well.

$("#my-button").click(function () {
    $("#my-modal").toggleClass('active');
});

#my-modal.active {
    opacity: 1;
    left: 0;
}

 $("#my-button").click(function () { $("#my-modal").toggleClass('active'); }); 

 #my-modal { opacity: 0; position: fixed; top: 50px; left: -250px; width: 250px; height: 100%; background-color: red; transition: all 1s linear; } #my-modal.active { opacity: 1; left: 0; } 

 <button id="my-button">Click me!</button> <div id="my-modal"></div> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>