Question

我试图让我的div在这个jQuery的位置之间切换：

$(document).ready(function(){
  $("button").click(function(){
   $("div").animate({left:'250px'};
 },
 function() {
  $("div").animate({left:'0px'};
 },
});

所有我需要做的就是左：“250px”div，然后当再次点击按钮时，将其向左移动：“0px”。所有答案将不胜感激。

Answer 1

点击不起作用，它只有一个回调，但你可以用一个标志切换动画

$(document).ready(function(){
    $("button").click(function(){
        var l = $(this).data('l');
        $("div").animate({left: (l ?  0 : 250)});
        $(this).data('l', !l);
    });
});

FIDDLE

Answer 2

我是这样做的。我会在div中添加一个类来跟踪它的状态。

$(document).ready(function(){
    $("button").click(function(){
        if(!$(this).hasClass('open') {
            $(this).addClass('open');
            $("div").animate({left:'250px'});
        } else {
            $(this).removeClass('open');
            $("div").animate({left:'0px'});
        }
     });
});

Answer 3

你可能最好只添加一个移动的类...它比jQuery animate()替代方法更有效，更容易控制。

<强>的jQuery

$(document).ready(function(){
    $('button').on('click', function () {
        $('div').toggleClass('move');
    });
});

<强> CSS

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    left: 0;
    transition: all 0.25s ease-in;
}

div.move {
    left: 250px;
}

<强> DEMO

Jquery切换动画

3 个答案: