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

Question

Through the use of a function in jQuery, along with my HTML & CSS, I have a series of different colored divs that change their opacity to appear as though the opaque div moves from left to right. I want the user to be able to click a red button to stop the animation on a square of his/her choosing. Right now I can get the animation to stop (albeit after it finishes its queued animations), but I am having trouble getting the square that has its opacity at 1 (at the time of the button click) stay at opacity 1. Any help would be greatly appreciated.

Here is a 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

You maybe need something like this:

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

This is the advantage of working with objects, a way very readable, simple and orderly.

Answer 2

The JQuery .stop() function help you to stop the animation. I know this is not the best solution for your problem because your opacity stay "1" only a short time.

    $('#red-button').click(function(){
      clearInterval(interval);
      $('.game-square').stop();//this stop the animation
      $('.game-square').each(function(){
        if ($(this).not().css('opacity') > '0.2'){// I changed this logic
            $(this).css('opacity', '1');
        }
      });
    });

Answer 3

I will take a different and less complex approach. Perhaps it has even better performance.

Demo http://jsfiddle.net/LkatLkz2/8/

This is the whole code. I use css for animation effect, and class changing opacity.

var sqrs = $('.game-square'),
    len = sqrs.length,
    i=0,
    looping = true;

setInterval(function(){
    if (!looping) return;
    sqrs.removeClass('full').eq(i).addClass('full');
    i = ++i % len;
},400);


$("#red-button").click(function () {
    looping = !looping;
});