jquery滑動上下動畫不會停止滑動

我有一張照片，其上的一些內容（名稱，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(); 

}

來源

2010-02-03 liz

我認爲每一次＃BD1穿過你的鼠標指針（這大概是懸停在圖片）它調用mouseout，然後在它過去時調用mouseover。

要測試此操作，請通過指向圖像的底部來激活動畫，然後立即將鼠標移開。

編輯：

嗯...對我來說，如果我要確保的旗幟不交叉的指針，它幫助，但當然這不是一個修復。

一種解決方案似乎是使用jQuery的懸停（）方法，而不是特定的鼠標事件：

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

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

工程在webkit的反正。沒有測試IE。

來源

2010-02-03 21:45:23 user113716

沒有改變任何東西。 .. – liz 2010-02-03 22:01:44

感謝工作，我仍然想知道爲什麼綁定沒有工作，雖然... – liz 2010-02-03 22:37:01

好吧，技術上'綁定'確實工作。它工作得很好。不知道爲什麼'懸停'修復它，但。必須進行某種內部檢查，以確保它在動畫製作時不會重複觸發，或者其他。很高興它對你有效。 – user113716 2010-02-03 22:39:52

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懸停事件運動（）一起...... 這實際上任何地方工作，鼠標懸停和鼠標移開事件用於...

來源

2011-01-21 12:50:19

jquery滑動上下動畫不會停止滑動

回答

相關問題