javascript - 使用 jquery 切换动画

Question

如果我用 jquery 单击按钮，我想切换动画。这是我已经尝试过的代码。

<div id="div1" style="height: 100px; width: 300px; background-color: black">
</div>
<button type="button" name="button">Click Me</button>


$("button").click(function() {
  $("#div1").toggle(300, function() {
    $("#div1").animate({left: "250px"});
    });
});

Answer 1

我做了this fiddle对于你来说，我希望它对你有帮助:

HTML:

<div class="holder">
<div id="div1" style="" class="div1">
</div>
</div>

<br/>
<button type="button" name="button">Click Me</button>

Js:

$("button").click(function() {
  if($(".div1").hasClass('left')){
     $(".div1").removeClass('left');
  }else{
  $(".div1").addClass('left');
  }
});

CSS:

$("button").click(function() {
  if($(".div1").hasClass('left')){
     $(".div1").removeClass('left');
  }else{
  $(".div1").addClass('left');
  }
});