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

パーツを削除してみてください.stop():)それは私のためにトリックを行います：http：//jsfiddle.net/skip405/Qjks9/

キャッシュに加えて$(this)、別の回答で提案されているように、変数の作成についてももう少し具体的にすることをお勧めします）

だから、何かをvar initwidth = $("li").width();使ってみる代わりに。var initwidth = $("ul.qnav li").width();それ以外の場合、アニメーションに何が起こるかを知っている順序付きと順序なしの両方のリストが2つ以上ある場合;）

于 2012-04-22T17:24:22.933 に答える
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 に答える