如何使jQuery動畫（{底部...工作

我試圖創建一個簡單的動畫，其中一個文本塊下降到其包含div時，該div是懸停結束。的jsfiddle這裏：http://jsfiddle.net/EFhVp/1/如何使jQuery動畫（{底部...工作

出於某種原因，我的代碼工作完全按預期在Firefox，而不是在Chrome或的jsfiddle

什麼是發生在Firefox（預計）：隱藏的文本在下降（從頂部）時我將鼠標放在上面，然後從容器上擡起鼠標

在Chrome和jfiddle中會發生什麼：文本類型向上拍攝，然後在鼠標關閉時消失。

我懷疑當我爲「bottom：」屬性設置動畫時會出現意想不到的情況，但我無法弄清楚。

2012-02-16 emersonthis

使用bottom屬性是一種奇怪的方法。我已經轉換代碼中使用top，而不是和動漫作品的跨瀏覽器：http://jsfiddle.net/EFhVp/2/

$(function() { 
    $(".projectgrid .entry-content").hover(function() { 
     $(".projecttags", this).animate({ 
      top: "0px" 
     }, "slow"); 
    }, function() { 
     $(".projecttags", this).animate({ 
      top: "-100%" 
     }, "slow"); 
    } 
    ); 
});

來源

2012-02-16 02:37:29 imsky

在不同的說明：我使用「底部」屬性的原因是將內部div放在容器上方。我看到你的版本使用'top：「 - 100％」'更簡單「，但缺點是用戶鼠標懸停時出現動畫div（因爲它是從容器頂部開始的）。任何想法如何解決這個問題？ – emersonthis 2012-02-16 15:51:56

是的，這裏有幾種方法：如果您知道標題的高度在所有實例中都是恆定的，則可以在CSS和JS中將-100％更改爲-50px（或實際高度）;如果你不能保證，那麼你可以計算加載的outerHeight，並用JS來抵消每個標題的高度。 – imsky 2012-02-16 21:16:18

完美。標題高度不一致。 outerHeight解決方案實際上是我在發佈這個問題之前要做的事情，所以我感覺很棒。計算.hover（）函數中的outerHeight是否可怕，而不是將所有不同的標題高度存儲爲變量？對於任何其他可能會發現這種情況的jQuery新手：注意將'.height（）'與'.outerHeight（）'混淆。只有後者包括填充，所以這是你需要的這種東西。起初我很困惑，因爲我認爲填充是一種「內部」的東西。 – emersonthis 2012-02-17 14:52:26

 $('.projectgrid .entry-content').hover(
function(){ 
    $(this).stop().animate({marginTop:'-25px',}, 300); 
    }, 
    function(){ 
    $(this).stop().animate({marginTop:'0px',}, 1000); 
    } 
);

試試這一個。它適用於我所有瀏覽器

來源

2012-02-16 03:24:28 Bert

我還沒有嘗試過，但它動畫容器（.entry-content），而不是內部div。 – emersonthis 2012-02-16 15:42:13

如何使jQuery動畫（{底部...工作

回答

相關問題