続行する前に$ .each（）ループでアニメーションが完了するまで待ちます。

スクロールするニュース項目の間に遅延を追加しようとしています。 $ .each（）はアニメーションが終了するのを待たずに仕事をしていることを理解していますが、一度に1つの項目をスクロールして最後のアニメーションが終了するまで待ってから続けるループの中。

$(function() { 
 
    var parentHeight = $("#news_updates").height(); 
 
    $(".updateItem").css("top", parentHeight); 
 
    
 
    
 
    $("#news_updates").children().each(function() { 
 
    scrollr($(this)); 
 
    }); 
 
    
 
    function scrollr(itemToScroll) { 
 
    itemToScroll.animate({top: '40%'}, 3000).delay(7000).animate({top: -35}, 3000); 
 
    } 
 
});

body 
 
{ 
 
    background-color: lightgrey; 
 
} 
 
#sponsor_updates { 
 

 
} 
 
#news_updates 
 
{ 
 
    overflow: hidden; 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 300px; 
 
    color: white; 
 
    position: relative; 
 
} 
 
#sponsor_updates h2 
 
{ 
 
    color: white; 
 
} 
 
.updateItem 
 
{ 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</head> 
 
<body> 
 
<div id="sponsor_updates"> 
 
\t <h2>News & Updates</h2> 
 
\t <div id="news_updates"> 
 
    <div class="updateItem"> 
 
     <p>News Item 1</p> 
 
    </div> 
 
    <div class="updateItem"> 
 
     <p>News Item 2</p> 
 
    </div> 
 
    <div class="updateItem"> 
 
     <p>News Item 3</p> 
 
    </div> 
 
    </div> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

出典

2016-12-16 Anonymous

これはそれがアニメーションの完了時に再帰する必要がありますが起こるようにするために。このデモのために遅延が700に落とされたことに注意してください。ここで

$(function() { 
 
    var parentHeight = $("#news_updates").height(); 
 
    $(".updateItem").css("top", parentHeight); 
 
    
 
    
 
    //collect items for recursion 
 
    var items = $("#news_updates").children(); 
 
    
 
    //immediately call a named function to recurse with 
 
    //break out when items are no longer present 
 
    (function scrollr(items,index) { 
 
    var itemToScroll = items.eq(index++); 
 
    if(!itemToScroll.length)return; 
 
    itemToScroll.animate({top: '40%'}, 3000).delay(700).animate({top: -35}, 3000,function(){ scrollr(items,index); }) 
 
    })(items,0) 
 
});

body 
 
{ 
 
    background-color: lightgrey; 
 
} 
 
#sponsor_updates { 
 

 
} 
 
#news_updates 
 
{ 
 
    overflow: hidden; 
 
    background-color: black; 
 
    height: 250px; 
 
    width: 300px; 
 
    color: white; 
 
    position: relative; 
 
} 
 
#sponsor_updates h2 
 
{ 
 
    color: white; 
 
} 
 
.updateItem 
 
{ 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
</head> 
 
<body> 
 
<div id="sponsor_updates"> 
 
\t <h2>News & Updates</h2> 
 
\t <div id="news_updates"> 
 
    <div class="updateItem"> 
 
     <p>News Item 1</p> 
 
    </div> 
 
    <div class="updateItem"> 
 
     <p>News Item 2</p> 
 
    </div> 
 
    <div class="updateItem"> 
 
     <p>News Item 3</p> 
 
    </div> 
 
    </div> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

出典

2016-12-16 00:30:24

回5秒よりも、ページのロードに遅らせると遷移するかなり単純なアプローチです。それはタイミングが一貫しているスライドのように複雑でないときに私が使用するものです。偽装していますが、単純な解決策としてはうまくいきます。

var duration = 5000; 

$('className').each(function(n) { 
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut(); 
});

出典

2016-12-16 00:37:11

続行する前に$ .each（）ループでアニメーションが完了するまで待ちます。

答えて

関連する問題