3

.fadeIn() を使用して、遷移時にナビゲーションのホバー効果をもう少しスムーズに見せようとしています。ダブルフェード（インとアウト、そして再びイン）としか言いようのないものを得ていることを除いて。

私はJSとjQuery APIが初めてなので、助けていただければ幸いです。私は CSS の古いプロなので、今でもその用語で考えています。これには、背景のスプライトの bg 位置を下に切り替えるクラスを追加しています。jQuery、CSS、またはその両方に問題がありますか?

http://tuscaroratackle.comが問題のインスタンスです - nav リンクです。

4

2 に答える 2

7

childに入るときでも発生するmouseoutandの代わりに、次のようにを使用できます。mouseover.hover()

$("#nav li").hover(function(){
  $(this).find("a").addClass("hover").fadeIn();
}, function(){
  $(this).find("a").removeClass("hover").fadeOut();
});

.hover()子に出入りするときに発生しないmouseenterおよびmouseleaveイベントにマップされます。これが、現在のコードで二重のアニメーションを引き起こしている原因です。

質問とは直接関係ありませんが、対処したいページには他にもいくつかの問題があります。jQuery が含まれており (最新の 1.4.x)、その後 jQuery 1.2.6 が検証プラグインのバージョン 1.5.1 に含まれています (これは現在1.7までです）。検証プラグインをアップグレードし、jQuery 1.2.6 インクルードを削除することを検討します。これは、後で頭痛の種になる可能性があるためです (現在、ユーザーにとってより重いページになります)。

于 2010-08-26T02:48:57.750 に答える
1

このようにしたいかもしれませんが、

$("#nav li").hover(function(){    
    $(this).find("a").fadeIn();
},
function(){
    $(this).find("a").fadeOut();
}).find("a").addClass("hover").hide();

ビューで非表示aにすると、ホバー時に表示されます。

クラスを設定display:noneして、そこhoverに電話する必要がないようにすることもできます.hide()。

ここにデモがあります

于 2010-08-26T03:02:05.633 に答える