Question

通过在jQuery中使用一个函数，以及我的HTML＆amp; CSS，我有一系列不同颜色的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

这是使用对象的优势，这种方式非常易读，简单有序。

Answer 2

JQuery .stop（）函数可以帮助您停止动画。我知道这不是解决问题的最佳方法，因为你的不透明度会让你感觉不舒服。＃1;＆＃34;只是很短的时间。

    $('#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

我将采取一种不同且不那么复杂的方法。也许它有更好的表现。

演示 http://jsfiddle.net/LkatLkz2/8/

这是整个代码。我使用css进行动画效果，并使用类改变不透明度。

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;
});

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

3 个答案: