0

私はこれに関するいくつかの投稿を読んだことがありますが、私の問題を解決するものはないようです。ギャラリーをフェードアウトすると、他のフェードインは正常に機能します...しかし、フェードインするアイテムは「更新」または再びフェードインするようです（本当に速い）フェードインアニメーションが完了した後、ここに私のコードがあります：

私が持っているのは基本的に「mediaContainer」内に含まれるフォトギャラリー（photographySection）です。これはcssです。

.mediaContainer {
   position: relative;
}
.photographySection {
    top: 10px;
    left:0;
    position: absolute;
}

html：

 <div class='mediaContainer'>              
       <div class='photographySection hidden' id='photographyExperimental'>
            <ul><li><img src...></li></ul>
        </div>
        <div class='photographySection hidden' id='photographyFaces'>
             <ul><li><img src...></li></ul>
        </div>
 </div>

js：

$(".photographyMenu").click(function(event){
    $(".photographySection").hide(1,function() { // hide all sections
        var section = $(event.target).attr("section"); // read new section to show
        $("#"+section).fadeIn(500); // for example $("#photographyFaces")
    }); 
});

すべてがスムーズに機能しますが、選択したdivがフェードインした後、何らかの理由で1回点滅/点滅することがあります

ありがとう！

4

3 に答える 3

1

500を使用しないでください。スムーズに動作し、低速は600ミリ秒、通常は400ミリ秒です。

于 2013-01-01T15:51:43.283 に答える
1

このような単純なタスクに、これだけのマークアップが本当に必要ですか? たくさんの画像をフェード インおよびフェード アウトするだけの場合は、次のようにすることができます。

html マークアップ:

<div class="mediaContainer">
    <img src="" />
    <img src="" />
    <img src="" />
</div>

jQuery:

function fadeInOut(){
    var imgs = $('.mediaContainer > img');
    imgs.wrapAll('<div class="slideshow" />');

    $('.slideshow > img:gt(0)').hide();
    setInterval(function(){
        $('.slideshow > img:first')
            .fadeOut(500)
            .next('img')
            .fadeIn(500)
            .end()
            .appendTo('.slideshow');
    }, 5000);
}

おそらく、より経験豊富な人がこのコードを改善できるでしょう。vars をこれらの「マジック ナンバー」(500/5000) などに設定することもできますが、これにより、はるかに少ないコードで問題を解決できます (単なるオプション)。

于 2012-12-26T10:33:26.333 に答える
0

これを試すことができます：http://jsfiddle.net/S4sbm/

$(".photographySection:gt(0)").hide();
    $(".photographyMenu").click(function(event){   
    $(".photographySection").fadeOut(500);    
    var section = $(event.target).attr("section"); // read new section to show         
    $("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")        
});

フィドルをチェックアウトして、これが役立つかどうかを確認してください。

于 2012-12-26T11:10:32.313 に答える