2

分類された 2 つの異なる画像 (レターファイルとハンドファイル) があります。片方がフェードアウトし、もう一方がフェードインして、そのように続けたいです。

これは私が持っているものですが、同時に画像をフェードしています:

$( document ).ready(function() {
   setInterval(function() {
   $( ".letterfile" ).fadeToggle( "slow", "linear" );
   setTimeout(function(){
       $( ".handfile" ).fadeToggle( "slow", "linear" );
       }, 2000);
   }, 2000);
});

助言がありますか？

4

4 に答える 4

2

最初の繰り返しの直後に両方が一緒に表示され、それ以降は状態、つまり表示または非表示の両方が切り替わるため、問題があります。タイムアウトなどを取り除き、より一般的なものにすることもできます。

画像（またはdivまたは使用しているもの）に共通のクラスを与えます

<img class="letterfile slide" src="http://placehold.it/100x100" />
<img class="handfile slide" src="http://placehold.it/200x200" />

JS

$(document).ready(function () {
    var duration = 'slow', type="linear";
    function toggleEM() {
        //Get the visible slide and after 2 sec start fade out transition
        $('.slide:visible').delay(2000).fadeOut(duration, type, function(){
            //once this is complete slide in the next one, i.e a sibling of this image
            $(this).siblings('.slide').fadeIn(duration, type, function(){
                  toggleEM(); //after that is completed start the loop again
            });
        })
    }
    toggleEM();
});

デモ

ほとんどのアニメーション メソッドには、1 つのアニメーションが完了したときに実行される完全なコールバックがあり、次のフェードトランジションを開始したい場合は、正確に実行されます。

于 2013-10-06T20:44:00.023 に答える
0

これは、単純化されたソリューション、簡単な説明、および実用的なフィドルです。すべての jQuery アニメーションは animation に配置queueされます。これは、店舗に入る、またはこの場合は実行するための列のようなものです。アニメーションが一列に並ぶのではなく、同時に実行する必要があるため、次の状態のオプション オブジェクトを渡しますqueue: false。も活用していfadeToggleます。この jQuery メソッドは、不透明度を 0 にしてから でスタイリングすることでdisplay: none、何かをフェードアウトさせます。すでにフェードインしている場合display:noneは、HTML でそれを利用します。

また、間隔によって再度呼び出される前に、アニメーションが完全に発生するように継続時間を確認して設定する必要があることにも注意してください。そうしないと、問題が発生します。

働くフィドル

HTML

<div class="letterfile"></div>
<div class="handfile" style="display:none"></div>

CSS

div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.letterfile {
    background-color: black;
}
.handfile {
    background-color: gold;
}

JS

setInterval(function(){
    $('.handfile, .letterfile').fadeToggle({
        queue: false,
        duration: 1250
    });
}, 2500);

幸運を！

于 2013-10-10T12:21:26.077 に答える
0

あなたが求めていたものとは正確には違いますが、CSSキーフレームを使用して同じ効果を達成できることに言及する価値があります.

実施例

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}
于 2013-10-06T21:15:14.213 に答える
0

このようなもの？

http://jsfiddle.net/RqXxn/1/

$(document).ready(function() {
   showLetter();
});

function showLetter() {
    $( ".letterfile" ).fadeToggle( "slow", "linear", function() {
       showHand(); 
    });
}

function showHand() {
    $( ".handfile" ).fadeToggle( "slow", "linear", function() {
       showLetter(); 
    });    
}
于 2013-10-06T20:40:04.143 に答える