添加/删除类和动画答案

【问题标题】：Add /Remove class and animate添加/删除类和动画
【发布时间】：2015-06-30 09:57:46
【问题描述】：

我将使用按钮为 div 设置动画。 => 点击。移动 div 顶部。再次单击移动 div 底部。如果我点击 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');
    });
});

【问题讨论】：

你的小提琴没有用！
给你的html来检查
delay() 不会延迟诸如show()、hide() 以及addClass()、removeClass() 等的非参数形式的方法。使用queue()。你的 sn-p 不起作用。
如果我在此处插入，它将不起作用。为电视设置动画的正确 js 是什么（用按钮（电视）上下（见链接：kcserver.info/starkk/starkk.at）

标签： jquery class jquery-animate add

【解决方案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>

【讨论】：

可以添加不同的像素值（响应式）
您可以使用 if($(this).width > 100){}。虽然，不是最好的方法（取决于您的用例）。考虑使用 CSS 媒体查询。例如codepen.io/timsmiths/pen/WvdVVq