jquery動畫底部問題

這很奇怪。我有一個動畫，當我在一個DIV上。進入這個div，我有另一個絕對位置，我想上移，直到鼠標停留在主div上，當我離開主div時，在你的位置下降。簡單的懸停效果。我已經寫下了這個功能，可以很好地分開一個奇怪的錯誤。jquery動畫底部問題

  var inside = $('.inside') 

     inside.hover(function() { 
      $(this).children(".coll_base").stop().animate({ 
       bottom:'+=30px' 
      },"slow") 
      }, function() { 
      $(this).children(".coll_base").stop().animate({ 
       bottom:'-=30px' 
      },"slow"); 
      });

我需要+ = 30和 - = 30，因爲我必須將此函數應用於不同底部的div範圍。問題是，如果我將鼠標懸停在DIV外，DIV就會生成動畫，但是當它下降時，他會減小每個動畫底部的值。如果我從主div上下移動，我會看到動畫div甚至超出了主div。我想我錯過了一些東西來解決這個錯誤。感謝您的任何幫助

來源

2010-06-06 andrea

如果bottom最初不是0，那麼您可以存儲初始底部值，並在第二個函數中使用它。（如果初始bottom是0，那麼就使用它。）

在下面的例子中，初始bottom位置使用data()屬性爲inside存儲，則在所述第二處理程序檢索以返回到原來的位置。

活生生的例子：http://jsfiddle.net/VAsZZ/

var inside = $('.inside'); 

inside.hover(
    function() { 
     if(!inside.data('bottom')) { 
      inside.data('bottom',$(this).children(".coll_base").css('bottom')); 
     } 
     $(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow") 
    }, 
    function() { 
     $(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow"); 
    } 
);

來源

2010-06-06 23:43:33 user113716

謝謝！它工作得很好！ – andrea 2010-06-06 23:52:19

@andrea - 不客氣。：O） – user113716 2010-06-06 23:53:18

我不認爲你可以使用相對的 - 在這種情況下（= 30像素和+ = 30像素）的值，因爲動畫可以在任意點停止其會拋出遵循它的動畫。最好在匹配的集合上調用each（），計算正確的偏移量並將值直接傳遞給懸停函數。

來源

2010-06-06 23:51:34 CurtainDog

jquery動畫底部問題

回答

相關問題