2

我制作了动画，当下一条评论出现时，所有加载的评论都会出现并消失。

我做了DEMO，请检查一下！

问题是timeupdate每秒工作大约 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

3

在评论中添加一个显示的标志，并检查它，在适当的地方更新。

请注意，我还重命名了一些局部变量以防止与父范围的冲突（不影响代码，但萤火虫在向我展示正确的东西时有点好笑）

更新

将其转换为 jquery 插件，以保持清洁，并将检查时间作为@BMH 的答案（因此请随时将他标记为已接受）。如果有多个评论，则停止显示时间戳的所有评论，如果重新回到之前的时间，将重新显示评论：

http://jsfiddle.net/9zqhF/12/

jQuery.fn.videoComments = function(options){
    var defaults = {
        "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'}
        ],
    };

    var options = $.extend(defaults, options);

    if(!options.commentHolder){
        throw "videoComments requires a commentHolder to put the comments in";
    }

    function setComment(message){
            $commentContainer.css({
                "marginLeft" : "400px",
                "opacity": "0"
            }).html(message);
    };

    var $commentContainer = $("<p></p>");
    setComment("");

    $(options.commentHolder).append($commentContainer);

    function showComments(time){
        var foundComments = findComments(time);
        $.each(foundComments,function(i,comment){
            $commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
            setComment(comment.message);
            $commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
        });
    };

    function findComments(timeToFind){
        var matchingComments = $.grep(options.comments, function(item){
          return (item.time == timeToFind);
        });

        return matchingComments;
    };

    return $(this).each(function(){
        var currentTime = -1;
        $(this).on("timeupdate", function(e) {
            var localTime = this.currentTime.toFixed();
            if(currentTime != localTime){
                currentTime = localTime;
                showComments(currentTime); 
            }
        });
    });
};

$("#video").videoComments({
    "commentHolder" : $(".newsticker")    
})
于 2013-08-23T10:27:32.423 回答
2

我会把标志放在准备好的功能中：

http://jsfiddle.net/b_m_h/9zqhF/11/

    jQuery(document).ready(function () {
    var fixedTime = 0;
    $('#video').on('timeupdate',function(e){
        if(this.currentTime.toFixed() != fixedTime){
            showComments(fixedTime);
            fixedTime = this.currentTime.toFixed()
        }  
    });

}); 
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'10','message':'hello! part-2 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 coms = findComments(time);
    if(coms[0]){
            $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
            $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+coms[0].message+"</p>");
            $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    }
}

function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time;
    });
}
于 2013-08-23T10:36:23.760 回答