添加/删除 class 和动画

Question

我将使用按钮制作 div 动画。 => 点击。移至 div 顶部。再次点击 move div bottom 。如果我点击 irt 移动到顶部。但是如果我再次点击它什么都不做。

http://www.kcserver.info/starkk/starkk.at/

点击电视按钮

这是我的脚本：

$(document).ready(function(){
    $("button").click(function(){
        $("#overlay-tv").animate({top: '0px'}, 4000, 'linear');
        $(this).delay(200).addClass('tv-aktiv');
    });
    $("button.tv-aktiv").click(function(){
        $("#overlay-tv").animate({top: '20px'}, 4000, 'linear');
        $(this).delay(200).removeClass('tv-aktiv');
    });
});

Answer 1

您只在按钮上注册了一次点击事件。当 $(document).ready() 触发时 'button.tv-aktiv' 不存在，因此 jQuery 将找不到它并附加新的点击事件。

试试这个：

<script>
  $(document).ready(function(){
      $("button").click(function(){
          if($(this).hasClass('tv-aktiv') {
            $("#overlay-tv").animate({top: '20px'}, 4000, 'linear');
            $(this).delay(200).removeClass('tv-aktiv');
          } else {
            $("#overlay-tv").animate({top: '0px'}, 4000, 'linear');
            $(this).delay(200).addClass('tv-aktiv');
          } 
      });
  });
</script>

添加/删除 class 和动画

Add /Remove class and animate

jquery

class

jquery-animate

add