0

jQuery フェードイン効果に問題があります。これは実際にはこのウェブサイトにあります:ウェブサイトはこちら. この問題は、メイン メニューから任意のオプションを選択し、ページの読み込み中 (メニューがフェードイン) にメニュー ボタンをスライドすると発生します。次に、それらの一部 (フェード オーバーしていたもの) が表示されないか、わずかにフェードして表示されます。ボタンにこのコードを使用しました：

HTML:

            <nav>
                <a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
                <a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
                <a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
                <a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
                <a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
                <a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
            </nav>

Jクエリ:

$(document).ready(function(){
$("nav a").mouseenter(function () {
    $('div', this).stop(true, false).animate({
        'height': '65px'
    }, 100);
    $(this).stop(true, false).animate({
        'padding-top': '5px'
    }, 300);
}).mouseleave(function () {
    $('div', this).stop(true, false).animate({
        'height': '0px'
    }, 300);
    
    $(this).stop(true, false).animate({
        'padding-top': '25px'
    }, 500);
});

    
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
    
for (var i=1; i<99; i++) {
  (function(i){
    setTimeout(function() {
       $('#b'+i).fadeIn(500);
     }, 300+100*i);
  })(i);
}
 });

JS フィドルはこちら: http://jsfiddle.net/tucado/9hhZW/

（フェードイン中にマウスをボタンの上にスライドすると、私が何を意味するかがわかります）。基本的に、ボタンを通常どおりに表示して、マウスをボタンの上にスライドさせても、ボタンが 100% にフェードするのを妨げないようにしたいと考えています。

この問題の解決策を事前にありがとうございます。

4

2 に答える 2

1

要素がアニメーション化されている場合は、mouseenter および mouseleave ハンドラーから戻るだけで、.is(':animated').

作業フィドルを参照してください

更新:上記のソリューションは、要素がアニメーション化されているときに終了しますが、それには mouseenter、mouseleave ハンドラーの独自のアニメーションも含まれていました。フェードイン アニメーションの場合にのみ終了したいので、fading開始時に呼び出されるプロパティを設定したことを区別するために要素をフェードし、フェード効果が終了したら削除するため、mouseenter マウスリーブ ハンドラでこのプロパティを確認できます。

新しい作業フィドルを参照してください

そして、ここにコードを貼り付けます：

$(document).ready(function(){
    $("nav a").mouseenter(function () {
        if ($(this).data('fading'))  //EXIT IF WE ARE FADING
            return;
        $('div', this).stop(true, false).animate({
            'height': '65px'
        }, 100);
        $(this).stop(true, false).animate({
            'padding-top': '5px'
        }, 300);
    }).mouseleave(function () {
        if ($(this).data('fading'))  //EXIT IF WE ARE FADING
            return;
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $(this).stop(true, false).animate({
            'padding-top': '25px'
        }, 500);
    });


    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();

    for (var i=1; i<99; i++) {
      (function(i){
        setTimeout(function() {
            $('#b'+i).data('fading', true).fadeIn(500, function() {
               $(this).data('fading', false);
            });
         }, 300+100*i);
      })(i);
    }   
 });
于 2013-03-29T14:18:18.303 に答える
0

問題は、最初に初期化される前に要素のアニメーションを停止することだと思います（最初のfadeIn（）;）

初めて表示した後にホバーを追加するために、fadeIn() コールバックを使用してフィドルを作成しました。

$(document).ready(function(){

var appendHover = function () {    
    $("nav a").mouseenter(function () {
        $('div', this).stop(true, false).animate({
            'height': '65px'
        }, 100);
        $(this).stop(true, false).animate({
            'padding-top': '5px'
        }, 300);
    }).mouseleave(function () {
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $(this).stop(true, false).animate({
            'padding-top': '25px'
        }, 500);
    });
}


    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();

    for (var i=1; i<99; i++) {
      (function(i){
        setTimeout(function() {
            $('#b'+i).fadeIn(500, function() {appendHover();});
         }, 300+100*i);
      })(i);
    }   
 });

http://jsfiddle.net/9hhZW/2/

于 2013-03-29T14:19:43.737 に答える