2

読み込んだコメントが全て表示され、次のコメントが来ると消えるアニメーションを作りました。

DEMOを作りましたので是非チェックしてみてください！

問題は、timeupdate1秒間に約10回動作していることです。
したがって、コメントごとにアニメーションが 10 回起動されます:(
DEMO を参照してください。奇妙な動きに見えることに気付くでしょう。

どうすればそれを処理できますか？誰でもJSfiddleで私のコードを変更できますか?

これらは私のコードです。

JavaScript

jQuery(document).ready(function () {
    $('#video').on('timeupdate',function(e){
            showComments(this.currentTime);  
    });

}); 
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];


function showComments(time){
    var comments = findComments(time);
    $.each(comments,function(i,comment){
        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+comment.message+"</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    });
}

function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time.toFixed();
    });
}

HTML

<body>
    <div class="newsticker"> 
    </div>
    <br />
    <br />
    <video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
</body>

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:50px;
}

.newsticker p{
    height:20px;
    width:150px;
    float:left;
    position:absolute;
}
4

2 に答える 2