このスニペットでホバー状態で幅が変更されないのはなぜですか

Question

バックグラウンド位置とプリペンドはうまく機能していますが、オーバーした要素の幅は次のルーチンで新しい幅を受け取りません。私は、正しいもの以外の構文のすべての置換を試したと思います！どんな理由であれ、Liの幅はこのように変更できませんか？

私はちょうどcss（ 'width'、 '128）でcssを設定しようとしましたが、それはうまくいきませんでした...アニメーションを使って何かを考えていると問題が起こっていました。

$(document).ready(function() { 
    initwidth = $("li").width(); // updated 

    // hover in 
    $(".qnav li").hover( 
     function(){ 

      // start the animation 
      $(this).stop().animate({width: "128"},{queue:false, duration:"fast" }); 
      $(this).stop().animate({backgroundPosition: "0 -30px"},{queue:false, duration:"fast" }); 
      $(this).prepend('<span class="prepended">Question </span'); 

     // hover out 
     },function(){ 
      $(this).stop().animate({width: initwidth}); 
      $(this).stop().animate({backgroundPosition: "0 0"},{queue:false, duration:"fast" }); 

      $(".prepended").remove(); 

     } 
    ); 
}); 

要素のCSSは次のとおりです。

.qnav li{ 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 2; 
    width:38px; 
    padding: 0; 
    background:#aaa9a9 url(images/arrowSprite.png) no-repeat 0 0; 
} 

Answer 1

.stop()一部:)それは私のためのトリックを行います削除してみてください：$(this)をキャッシュするほかhttp://jsfiddle.net/skip405/Qjks9/

を、as suggested in another answerは、私はそう

）だけでなく、変数を作成するには、もう少し具体的にすることをお勧めしますvar initwidth = $("li").width();の代わりにvar initwidth = $("ul.qnav li").width();などを試してみてください。そうでなければ、あなたのアニメーションに何が起こるかを知っている順序付けられていないリストが2つ以上ある場合）

Answer 2

1 - あなたはwidth属性の "PX" 欠けている：

$(this).stop().animate({width: "128px"},{queue:false, duration:"fast" }); 

2-あなたが決算>が欠落しているがspanのタグ：

$(this).prepend('<span class="prepended">Question </span>'); 

、3-チェーンあなたの方法とjQueryのメソッドを呼び出すためにキャッシュされたインスタンスを使用します。

var $this = $(this); 

$this.stop().animate({width: "128"},{queue:false, duration:"fast" }) 
     .animate({backgroundPosition: "0 -30px"},{queue:false, duration:"fast" }) 
     .prepend('<span class="prepended">Question </span>'); 

jQueryのすべての呼び出しにオブジェクトを処理しませんので、これは、パフォーマンスを最適化します。