jquery - 动画期间仅突出显示集合中的一个元素

Question

我自己写了一个名为 marquee 的 jquery 插件(我认为没有必要解释它的作用)

这个插件还必须做一件我部分能够实现的事情。当某个单词位于容器中间三分之一时，在动画期间突出显示该单词。

我的动画是这样完成的

var reset = function() {
    $(this).css("margin-left", "0%");
    $(this).animate({ "margin-left": (-w-30)+"px" },{
        duration:s.interval,
        easing:'linear',
        done:reset, // don't forget to uncomment
        step:_highlight
    });
};
reset.call(e.find(".text-banner-wrapper"));

而_highlight函数的写法如下

_highlight = function(e,f){
    var f = $(f.elem).closest('.text-carousel');
    var w = f.width();
    f.find('.item').each(function(){
        var o = $(this).offset().left-f.offset().left;
        if(o<((2*w)/3) && o>w/3){
            if(!$(this).prev().is(".active")){
                $(this)
                       .css('color',f.data("highlightcolor"))
                       .addClass("active");
            }           
        }
        else
            $(this).removeClass("active").removeAttr("style");
    });
}

你可以看到我的方法，但是它没有达到预期的效果。我可以添加和删除样式和类别，但如果单词很短，它会突出显示更多内容。有人可以帮我吗？

谢谢!

编辑这是 fiddle必须大幅调整输出窗口的大小，才能从一开始就正常工作。

Answer 1

我建议检查是否已有事件项目，如果有，则不要突出显示新项目。

if(!$('.item.active').length) {
    $(this).css('color',f.data("highlightcolor")).addClass("active");   
}

所以你的突出显示功能将如下所示:

_highlight = function(e,f){
    var f = $(f.elem).closest('.text-carousel');
    var w = f.width();
    f.find('.item').each(function(){
        var o = $(this).offset().left-f.offset().left;
        if(o<((2*w)/3) && o>w/3){
            if(!$('.item.active').length) {
                $(this).css('color',f.data("highlightcolor")).addClass("active");   
            }
        }
        else
            $(this).removeClass("active").removeAttr("style");
    });
}