Question

以下是我所拥有的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $("#toggle").click(function() {
      $(this).toggleClass("on"); 
      $("#m_1").fadeToggle(150);
    });
</script>

这是一个点击时淡入的菜单。我希望它在点击它时从margin-top: -80px;转到margin-top:80px＆＃34;在＆＃34;上，但在点击它时反之亦然＃34;关闭＆＃34;慢慢消退。

我对编码没有太多经验，所以如果这看起来很少，我很抱歉。

Answer 1

您可以根据on类

的状态运行不同的动画

$("#toggle").click(function() {
  //run the stop to make sure the animation isnt already running
  $(this).stop(true, true)
  //fire the animation based on the class state
  if ($(this).hasClass('on')) $(this).animate({margin-top : '80px'});
  else $(this).animate({margin-top : '-80px'});

  //toggle the class
  $(this).toggleClass("on"); 

  $("#m_1").fadeToggle(150);
});

如果您愿意，也可以将不透明度切换添加到.animate调用中。取决于$("#m_1").fadeToggle(150);正在做什么

点击时同时动画和淡入

1 个答案: