我有一张照片,其上的一些内容(名称,desc,价格)的内容是ul。在默认状态下,ul只显示名称,方法是将ul的绝对位置设置为图像底部,然后用掩码div隐藏溢出。那么当你鼠标悬停时,只要你留在图像上,ul就会显示整个信息。当你将鼠标移出时,它会回落到刚刚显示标题的初始位置......这就是它的工作原理。现在当你将鼠标悬停时,它会永远向上和向下滑动。jquery滑动上下动画不会停止滑动
下面是HTML和样式
div.banner_product {
float: left; width: 236px; position: relative; overflow: visible;
}
div.banner_product ul {
width: 220px;
background-color: black;
font-size: 16px;
color: white;
list-style-type: none;
position: absolute; top: 230px;
margin: 8px;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
}
.mask {
position: absolute;
top: 0;
overflow: hidden;
height: 300px;
width: 235px;
}
/*html*/
<div class="banner_product" id="pi1"><img src="image1.jpg" alt="" border="0" height="306" width="235" /><div class="mask">
<ul id="bd1">
<li class="name-b"><a href="#">PRODUCT NAME</a></li>
<li class="text-b">DESCRIPTION</li>
<li class="price-b">PRICE</li>
</ul></div>
</div>
这是脚本:
$('#pi1')
.bind('mouseover',enterImg)
.bind('mouseout',exitImg)
function enterImg(event){
$('#bd1').animate({"top": "4px"}, 2000);
event.stopPropagation();
}
function exitImg(event){
$('#bd1').animate({"top": "236px"}, 2000);
event.stopPropagation();
}
没有改变任何东西。 .. – liz 2010-02-03 22:01:44
感谢工作,我仍然想知道为什么绑定没有工作,虽然... – liz 2010-02-03 22:37:01
好吧,技术上'绑定'确实工作。它工作得很好。不知道为什么'悬停'修复它,但。必须进行某种内部检查,以确保它在动画制作时不会重复触发,或者其他。很高兴它对你有效。 – user113716 2010-02-03 22:39:52