gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 23:33:32 27 4
gpt4 key购买 nike

所以我有图像,当您单击它们时它们会展开(通过 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 属性。然后让 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 - 将标志添加到 javascript (hasClass),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24702583/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com