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をこれほど多く変更するのは好きではありません。これがあなたのためにうまくいかなければ、私はお詫びします。ここでは、この程度

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

一つの良いところは、セットアップあなたが追加することができているあなたは、私が考えて欲しいものないJSFiddleが...あるように、多くの

ラッパーの内側に望むよう

<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"}); 
     } 
    ); 
}); 

幅を切り替えるには、どの2つの状態を切り替えたいと思っていましたか？それは人間としてはわかりませんでしたが、おそらく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をより簡潔にするでしょうが、そこにはあなたがいます。ポストナビゲーションのための素晴らしい効果。