使用jQuery显示和隐藏setTimeout
使用jQuery显示和隐藏setTimeout
提问于 2013-04-25 14:50:52
我有一个大的，我想在加载时显示，然后让它超时以显示较小的图像。然后在鼠标上，使用jQuery在大图中滑动，在鼠标上滑出大图并在小图中滑动。这是我的代码，它只做mouseover，mouseout函数。我需要它从显示5秒的大的开始，然后滑到小的。：
<script type="text/javascript">
$(document).ready(function () {
$(".expanded").show();
$(".collapsed").hide();
$(".collapsed").mouseover(function () {
$(".collapsed").slideUp(500);
$(this).next(".expanded").slideToggle(500);
});
$(".expanded").mouseleave(function () {
$(".expanded").slideUp(500);
$(".collapsed").slideDown(500);
});
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-25 15:02:06
我将创建一个全局变量"readyforHovering“，它将被设置为false，直到超时到期，例如：
var readyforHovering = false;
$(document).ready(function () {
setTimeout(function() {
//Code to hide the large image and show the smaller image goes here
//Now enable hovering...
readyforHovering = true;
}, 5000);
$(".expanded").show();
$(".collapsed").hide();
//toggle the componenet with class msg_body
$(".collapsed").mouseover(function () {
if (readyforHovering) {
$(".collapsed").slideUp(500);
$(this).next(".expanded").slideToggle(500);
}
});
$(".expanded").mouseleave(function () {
if (readyforHovering) {
$(".expanded").slideUp(500);
$(".collapsed").slideDown(500);
}
});
});您不希望用户在5秒过期并显示较小的图像之前无法悬停……这就是readyforHovering变量的意义所在。
Stack Overflow用户
发布于 2013-04-25 15:05:43
试试这个：
$(document).ready(function () {
setTimeout(function(){
toggleImage($(".expanded"));
},5000);
$(".collapsed").hide();
//toggle the componenet with class msg_body
$(".collapsed").mouseover(function () {
toggleImage($(".collapsed"));
});
$(".expanded").mouseleave(function () {
toggleImage($(".expanded"));
});
});
function toggleImage(img) {
$(img).slideUp(500, function() {
$(this).siblings("img").slideToggle(500);
});
return;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16218021
复制相关文章
点击加载更多
相似问题
IOS跳转页面报错？
小程序搭建时data-event-opts跳转内部页面报错，跳转的内部页面却需要获取APPID？
进行训练时候tf报错？
centos多ip多用户运行ss5的时候，总是报错？
增加子商户的时候报错？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
