jquery - 为什么在此代码段中悬停状态下宽度没有改变

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(); 或类似的东西。否则，当有两个或多个有序和无序列表时，谁知道你的动画可能会发生什么；)