0

背景位置和前置工作正常，但悬停在元素的宽度没有收到下面的例程的新宽度。我想我已经尝试了所有的语法排列，除了正确的！除非，出于某种原因，不能以这种方式更改 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;
}
4

2 回答 2

0

1-您缺少宽度属性上的“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 不会在每次调用时都处理对象；

于 2012-04-22T16:48:03.277 回答
0

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

除了缓存之外$(this)，正如另一个答案中所建议的那样，我建议在制作变量时也更具体一些）

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

于 2012-04-22T17:24:22.933 回答