JQuery Text slideDown / slideUp Overlay on Image保持弹跳？ [英] JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing?
问题描述
我试图复制将鼠标悬停在图片上方时出现的文本叠加效果 - 在 Guardian网站上找到
I am trying to replicate the text overlay effect that occurs when you mouse over an image - found on the Guardian web site.
除了当我的鼠标移过该区域退回的 trail-text 区域时（slideDown slideUp）重复多次。
I have it working except when my mouse goes over the trail-text area that area bounces (slideDown slideUp) repeatedly a number of times.
我认为这是因为 trail-text 区域成为焦点并导致mouseout事件。
I think it is because the trail-text area becomes the focus and causes the mouseout event.
无论如何任何建议/提示将是真正有用的。
非常感谢，
Ben ...
Anyway any suggestions/tips would be really helpful. Many thanks, Ben...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>TEST</title>
<style type="text/css">
.pixie {
width: 870px;
padding: 0;
margin: 0;
}
.strap {
padding: 0;
margin: 0;
}
div.caption{
padding-left: 10px;
/*background-color: #a5a5a5;*/
background-color: #e03d32;
color: white;
}
.caption h3 {
color: white;
}
.pixie a,
.pixie div,
.pixie a:hover {
display: block;
position: relative;
text-decoration: none;
}
.pixie div.trail-text {
color: #333;
background-color: transparent;
background-image: url(../images/grey-bg.png);
background-repeat: repeat;
}
.pixie div.trail-text {
display: none;
margin-top: 0;
position: absolute;
overflow: hidden;
text-align: left;
padding-top: 2em;
padding-bottom: 0;
z-index: 10;
height: 4.25em;
width: 870px;
}
</style>
<script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='javascripts/main.js' type='text/javascript'></script>
</head>
<body>
<div class='pixie'>
<div class='caption'>
<h3>Some Big Heading</h3>
<p class='strap'>Some strapline of stuff</p>
</div>
<div class='trail-text'>
The <strong>Overlay text</strong> which should appear and then disappear.
</div>
<img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
</div>
</body>
</html>
main.js
main.js
$(document).ready(function(){
$("div.trail-text").attr("style", "display: none;");
if ($(".pixie,div.trail-text")) {
var pixies = $(".pixie,div.trail-text");
$(pixies).mouseover(function() {
$(this).find("div.trail-text").slideDown("fast")
}).mouseout(function() {
$(this).find("div.trail-text").slideUp("fast")
});
};
});
推荐答案
问题是 mouseover 和 mouseout 事件会向上弹起，这意味着每次鼠标进入或离开div中的任何元素时，它们都会触发。
The problem is that the mouseover and mouseout events bubble upward, which means they fire every time the mouse enters or leaves any element within your div.
您应该使用jQuery的 hover 方法，如下所示：
You should use jQuery's hover method, like this:
$(".pixie,div.trail-text").hover(
function() { $(this).find("div.trail-text").slideDown("fast"); },
function() { $(this).find("div.trail-text").slideUp("fast"); }
);
这篇关于JQuery Text slideDown / slideUp Overlay on Image保持弹跳？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
