Question

所以我有图像，当你点击它们扩展（通过CSS）。但是，我也想要它，这样当你点击时，图像将被推到页面顶部。从我所听到的是，如果我使用toggleClass函数，那么我需要在启动动画之前有一个标志，但是，我似乎无法让它正常运行。

$("img").on("click", function (){
  $(this).toggleClass("selected");

  if ($("img").hasClass("selected")) {
    found = true;
  }


  var timeout = setTimeout(function () {
            $('html,body').animate({
                scrollTop: $('.selected').offset().top - 60
            }, 100);
        }, 5);
});

Answer 1

您应该考虑使用CSS3过渡而不是使用计时器进行监控。您设置transition以转换top属性。然后让selected类通过切换来改变top。此更改将导致动画启动。See this example：

HTML：

<div class="bar">weee!</div>

CSS：

.bar{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    transition: top 1s ease 0;
    top: 100px;
}

.bar.selected{
    top : 0px;
}

JS：

$('.bar').on('click',function(){
   $(this).toggleClass('selected'); 
});

将标志添加到javascript（hasClass）

1 个答案: