爲什麼在這個片段中懸停狀態的寬度沒有改變

Question

背景位置和前置正常工作正常，但懸停在元素上的寬度沒有接收到下面例程的新寬度。我想我已經嘗試了所有的語法排列，除了正確的排列！除非因爲任何原因，李的寬度不能以這種方式改變？

我甚至試着用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()部分:)它的伎倆對我來說：http://jsfiddle.net/skip405/Qjks9/

除了緩存$(this)，as suggested in another answer我會建議更具體一點在使變量以及）

所以而不是var initwidth = $("li").width();嘗試使用var initwidth = $("ul.qnav li").width();或類似的東西。否則當有兩個或更多的列表既有序和無序誰知道可能發生在您的動畫;）

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將不處理在每次調用的對象;