跳過jQuery寬度動畫

Question

我在解決爲什麼我的動畫跳躍時遇到問題。有任何想法嗎？

http://jsfiddle.net/9F5DK/5/

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(

      function(){ 

      jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"}); 

     } 
    ); 
}); 

Answer 1

好吧我花了一些時間搞清楚了這一點。通常我不喜歡改變原來的html javascript/jquery這麼多，如果這不適合你，那麼我很抱歉。下面是你想要做什麼，我認爲一個的jsfiddle ...

http://jsfiddle.net/LqHwk/1/

一個關於這個好處設置是你可以添加儘可能多的

<div class="post-nav-next"> 

如你所願的包裝內，他們將全部工作相同

順便說一句我強烈推薦使用jquery插件hoverIntent。

Answer 2

問題我看到：

上內嵌<a>或在你的CSS或動畫<span>標籤設置一個高度或寬度。閱讀this article，試圖設置內嵌標籤的高度或寬度。這適用於你的CSS和你的動畫。如果你想動畫的寬度，我認爲你需要做一個塊元素。

在我看來，動畫可能會因爲寬度和不透明度的切換而變得困惑。也許你最好指定兩個回調來懸停，並更直接地指定動畫開始點和停止點，而不是讓切換方法必須找出開始點和停止點應該是什麼。例如，如果沒有將HTML重做爲塊元素（我認爲這對於可靠地設置動畫寬度是必需的），那麼這裏只是關於不透明度的平滑動畫。我已經將CSS的起始點設置爲所需的起始不透明度，並且我已經停止使用切換來設置動畫並將其明確設置。我不確定這是否是必需的，但它可以避免模糊性從切換開始嘗試猜出您想要的內容：http://jsfiddle.net/jfriend00/r2cdn/（不透明度動畫只在此jsfiddle中，兩個動畫都包含在下面的jsfiddle中）。

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"}); 
     } 
    ); 
}); 

對於寬度的切換，您希望切換哪兩種狀態？這對我來說並不清楚，可能對jQuery.toggle（）也不清楚。如果你想要做的是爲正確的填充設置動畫，那麼也許你應該直接做到這一點。

如果我爲填充添加直接動畫並更改CSS中的起始值，它將開始平滑地進行動畫處理。我不是100％確定我知道你在找什麼動畫，但這應該是你可以走的方向：http://jsfiddle.net/jfriend00/PE4qQ/。

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
     jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"}); 
     } 
    ); 
}); 

Answer 3

過了一段時間，我回來再看這個動畫。最終效果可以在這裏看到：

http://jsfiddle.net/Niels/zrru5/1/

注意到有以下一些重要的事情：

1. 的overflow:hidden規則隱藏文本，因爲它的容器是動畫。
2. white-space: nowrap;span可防止文字重排。
3. div在加載時處於其默認狀態，並且存儲寬度。該寬度然後在懸停動畫中重新應用。

有人比我更好會使js更簡潔，但你有它。對於後導航有很好的效果。