javascript - 将标志添加到 javascript (hasClass)

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'); 
});