使用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
复制相关文章
点击加载更多
腾讯云开发者
