1

jqueryを使用して、フェード効果を使用してdivを1つずつ回転させますが、効果は滑らかではなく、上下にジャンプしてから、ここに私のフィドルが表示されます。

http://jsfiddle.net/xXRwA/

$(document).ready(function(e) {

  $('.testimonials div:first').show();


    setInterval(function(){ $('.testimonials div:first-child').fadeOut().next('div').fadeIn().end().appendTo('.testimonials') },3000);
});
4

3 に答える 3

2

次の CSS を追加します。

.testimonials {
    position: relative;
}

.testimonials .a {
    position: absolute;
}

これにより、すべての.a's が上下に配置されます

デモ: http://jsfiddle.net/xXRwA/1/

于 2013-12-16T12:59:46.080 に答える
2

コールバック関数を使用します。

setInterval(function(){ 
   $('.testimonials div:first-child').fadeOut(function() {
        $(this).next('div').fadeIn().end().appendTo('.testimonials');
   }); 
},3000);

http://jsfiddle.net/xXRwA/3/

オブジェクトをキャッシュし、インデックスに基づいて要素を表示/非表示にすることもできることに注意してください。これは、DOM をクエリして、ここでは必要のない多くの jQuery オブジェクトを作成するよりも効率的です (重要な場合)。このようなもの。

于 2013-12-16T13:01:05.253 に答える
1

メソッドを表示および非表示にする間隔を使用するだけです。

 $('.testimonials div:first').show();

setInterval(function(){ $('.testimonials div:first-child').fadeOut(1000).next('div').fadeIn(1000).end().appendTo('.testimonials') },3000);

または、ジャンプを表示したくない場合は、次のようにします。

 $('.testimonials div:first').show();

setInterval(function(){ $('.testimonials div:first-child').fadeOut(1000).next('div').delay(1000).fadeIn(1000).end().appendTo('.testimonials') },3000);

JSFIDDLE: http://jsfiddle.net/xXRwA/4/

于 2013-12-16T13:00:20.130 に答える