向javascript添加标志（hasClass）

所以我有一些图像，当你点击它们时，它们会展开（通过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);
});

---

您应该考虑使用CSS3转换，而不是使用计时器进行监控。您可以设置

transition

来转换

top

属性。然后选择

类，通过切换它来改变
顶部的
。此更改将导致动画生效：

HTML:

JS:

您应该考虑使用CSS3转换，而不是使用计时器进行监控。您可以设置
transition
来转换
top
属性。然后选择
类，通过切换它来改变
顶部的
。此更改将导致动画生效：

HTML:

JS:

您没有使用
found
标志执行任何操作。为什么？我不明白你想做什么，使用toggleClass的所有想法都是为了在某些情况下停止使用hasClass和flags。toggleClass函数仅用于添加/删除类。请解释你自己。希望这能澄清问题：基本上我希望这样，当你按下一个图像时，主体和html将移到顶部，而不仅仅是在当前位置展开。你没有使用
found
标志做任何事情。为什么？我不明白你想做什么，使用toggleClass的所有想法都是为了在某些情况下停止使用hasClass和flags。toggleClass函数仅用于添加/删除类。请解释你自己。希望这能澄清问题：基本上我想要它，这样当你按下一个图像时，主体和html将移到顶部，而不仅仅是在当前位置展开。我可以用css制作它，这样html和主体就可以移到图像上了吗？我有一个很长的图像列表。我可以用css制作它，这样html和正文就可以向上移动到图像了吗？我有一长串的图片。
<div class="bar">weee!</div>

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

.bar.selected{
    top : 0px;
}

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