使用切换按钮为div滑动动画制作动画

Question

I can't seem to figure out how to animate my div sliding with a toggle button.

I tried using variables but I have multiple of these and I am creating too many variables to keep track of the clicks on each of them.

 $(document).ready(function() { $('#toggle-sidebar').click(function() { $('#sidebar').animate({ left: '200' }, 500); }); }); 

 #sidebar { position: absolute; top: 0; left: 0; width: 20em; height: 70vh; background:#333; } #toggle-sidebar { float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar"></div> <a href="#" id="toggle-sidebar">Toggle</a> 

Answer 1

Please note that this method uses CSS transitions, and is not supported by IE9 and older. If that's a concern for you, keep using jQuery to animate your divs, and save their state by toggling a class on them.

If you have multiple div s to move, use classes instead of IDs. And toggle a class on them:

 $('.toggle-sidebar').click(function() { $(this).next().toggleClass('moved'); }); 

 .sidebar { position: relative; left: 0; width: 20px; height: 20px; background: #333; -webkit-transition: left .5s ease; transition: left .5s ease; } .sidebar.moved { left: 200px; } .toggle-sidebar { float: right; margin-right: 90px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-sidebar">Toggle</div> <div class="sidebar"></div> <div class="toggle-sidebar">Toggle</div> <div class="sidebar"></div> <div class="toggle-sidebar">Toggle</div> <div class="sidebar"></div> <div class="toggle-sidebar">Toggle</div> <div class="sidebar"></div> 

Answer 2

Use Css animations instead... here an example: http://jsfiddle.net/leojavier/mag4eamz/

<div id="sidebar" class="primary-menu-show"></div>
<a href="#" id="toggle-sidebar">Toggle</a>

JS

$('#toggle-sidebar').click(function() {
   $('#sidebar').toggleClass('primary-menu-hide')
});

CSS

#sidebar {
  width: 20em;
  height: 70vh;
  background:#333;
}

#toggle-sidebar {
  float: none;
}


.primary-menu-show {
    -moz-animation: primary-menu-show 0.4s;
    -o-animation: primary-menu-show 0.4s;
    -webkit-animation: primary-menu-show 0.4s;
    animation: primary-menu-show 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes primary-menu-show {
    from {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.primary-menu-hide {
    -moz-animation: primary-menu-hide 0.4s;
    -o-animation: primary-menu-hide 0.4s;
    -webkit-animation: primary-menu-hide 0.4s;
    animation: primary-menu-hide 0.4s;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

@-moz-keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

@-webkit-keyframes primary-menu-hide {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        transform: translateX(-250px);
    }
}

Here is a functional sample: http://jsfiddle.net/leojavier/mag4eamz/

Answer 3

Ok, let's use variables.

 $(document).ready(function() { var isLeft = false, sideBar = $('#sidebar'); $('#toggle-sidebar').click(function() { if (isLeft) { sideBar.animate({ left: '0' }, 500).promise().done(function() { isLeft = false; }); } else { sideBar.animate({ left: '200' }, 500).promise().done(function() { isLeft = true; }); } }); }); 

 #sidebar { position: absolute; top: 0; left: 0; width: 20em; height: 70vh; background: #333; } #toggle-sidebar { float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar"></div> <a href="#" id="toggle-sidebar">Toggle</a> 

Answer 4

(document).ready(function() {

$('#toggle-sidebar').click(function() {
    if($("#sidebar").hasClass("animated")) {
        $("#sidebar").removeClass("animated") ;
        $('#sidebar').animate({
        left: '0'
        }, 500);
    } else {

        $('#sidebar').animate({
        left: '200'
        }, 500);
        $("#sidebar").addClass("animated") ;

    }
});

});