Question

背景位置和前置工作正常，但是悬停在元素上的宽度没有接收到下面例程的新宽度。我想我已经尝试了除了正确的语法之外的所有语法排列！除非出于某种原因，否则Li的宽度不能以这种方式改变？

我甚至尝试用css设置css（'width'，'128）并且这不起作用......用动画来思考一些问题导致了问题..但我很难过。

$(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

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不会在每次调用时处理对象;

Answer 2

尝试删除.stop()部分:)这对我有用：http://jsfiddle.net/skip405/Qjks9/

除了缓存$(this)，as suggested in another answer我还建议在制作变量时更具体一点。

所以不要var initwidth = $("li").width();尝试使用var initwidth = $("ul.qnav li").width();或类似的东西。否则，当有两个或多个有序和无序的列表时，谁知道动画会发生什么;）

为什么在此代码段中悬停状态下的宽度未更改

2 个答案: