2010-02-03 92 views
2

我有一张照片,其上的一些内容(名称,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(); 

} 

回答

2

我认为每一次#BD1穿过你的鼠标指针(这大概是悬停在图片)它调用mouseout,然后在它过去时调用mouseover。

要测试此操作,请通过指向图像的底部来激活动画,然后立即将鼠标移开。

编辑:

嗯...对我来说,如果我要确保的旗帜不交叉的指针,它帮助,但当然这不是一个修复。

一种解决方案似乎是使用jQuery的悬停()方法,而不是特定的鼠标事件:

$('#pi1').hover(
    function (event){ 
     $('#bd1').animate({"top": "4px"}, 500); 
    }, 

    function (event){ 
     $('#bd1').animate({"top": "236px"}, 500); 
    }); 

工程在webkit的反正。没有测试IE。

+0

没有改变任何东西。 .. – liz 2010-02-03 22:01:44

+0

感谢工作,我仍然想知道为什么绑定没有工作,虽然... – liz 2010-02-03 22:37:01

+0

好吧,技术上'绑定'确实工作。它工作得很好。不知道为什么'悬停'修复它,但。必须进行某种内部检查,以确保它在动画制作时不会重复触发,或者其他。很高兴它对你有效。 – user113716 2010-02-03 22:39:52

1
var state = true; 
    $('#pi1').hover(function(){ 
     if(state){ 
      $('#bd1').slideDown('slow',function(){ 
       state = false; 
      }); 
     } 
    },function(){ 
     if(!state){ 
      $('#bd1').slideUp('slow',function(){ 
       state = true; 
      }); 
     } 
    }) 

停止redandent上下使用jQuery效果基本show(),并用了slideDown悬停事件运动()一起...... 这实际上任何地方工作,鼠标悬停和鼠标移开事件用于...