javascript - 您可以通过动态改变不透明度来定位元素吗？

Question

通过使用 jQuery 中的函数以及我的 HTML 和 CSS，我有一系列不同颜色的 div，这些 div 改变它们的不透明度，看起来好像不透明的 div 从左到右移动。我希望用户能够单击一个红色按钮来停止他/她选择的正方形上的动画。现在我可以让动画停止(尽管在它完成排队的动画之后)，但是我无法让不透明度为 1 的正方形(在单击按钮时)保持在不透明度 1。任何帮助都会不胜感激。

这是一个 jsfiddle http://jsfiddle.net/seifs4/krm6uenj/

$(document).ready(function () {

$.fn.extend({
    brighten: function(){
        $(this).fadeTo(150, 1);
    }
});
$.fn.extend({
    fade: function(){
        $(this).fadeTo(150, 0.2);
    }
});

function animateSequence() {
    $('.game-square').each(function (i) {
        $(this).delay((i++) * 145).brighten();
        $(this).delay((i++) * 5).fade();
    });
}
animateSequence()
var interval=setInterval(animateSequence, 1700);

$('#red-button').click(function(){

    $('.game-square').each(function(){
        if ($('.game-square', this).not().css('opacity') == 0.2){
        $(this).css('opacity', '1');
        }
    });
    clearInterval(interval);
});

});

Answer 1

你可能需要这样的东西:

function animateSequence(){
    this.current = 0;
    this.squares = $(".game-square");
    this.animate = function(){
        this.squares.eq(this.current).fadeTo(150, 1, function(){
            $(this).fadeTo(150, 0.2)
        });
        this.current = this.current >= this.squares.length - 1 ? 0 : this.current + 1;
    };
    this.start = function(){
        this.running = setInterval(this.animate.bind(this), 150)    
    };
    this.stop = function(){
        this.running = clearInterval(this.running);            
        this.squares.eq(this.current).stop().css("opacity",1);
        alert("Current color: " + this.squares.eq(this.current).attr("class"))
    }
}

Demo

这是使用对象的优势，一种可读性强、简单且有序的方式。