Question

我有以下代码可以正常运行并在每3秒后旋转div

var $elements = $('#One, #Two, #Three, #Four');
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
        }, 3000);
    });
}
anim_loop(0);

如果我通过单选按钮进行循环，我该如何控制循环。

请参阅此示例http://jsfiddle.net/w5YHY/1/

我希望循环应该继续但是当我点击第3个收音机时，第三个元素#three应该显示并且循环应该从4继续。同样点击第一个收音机，＃One应显示，循环应从第二个元素开始

Answer 1

您可以使用click事件来停止循环并使用基于您选择的无线电的新索引重新启动它。

这是我的fiddle

首先我将超时设置为变量，以便我可以在点击事件中清除它。

var animLoop; // declared outside the function

animLoop = setTimeout(function() { // set in the function

我更改了以下行。

$self.fadeOut(1000);

这样可以在调用新循环时正确确保div的淡出。

$("div").fadeOut(1000);

然后在收音机的点击事件中，我得到了收音机的id，我设置它对应于div的正确索引并将其传递给新的anim_loop。希望这是你想要的。

下面是基于你的小提琴的代码。

    var $elements = $('#One, #Two, #Three, #Four');
var animLoop;
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        $("#"+(index)).prop("checked", true);
        animLoop = setTimeout(function() {
            $("div").fadeOut(1000);
            //$self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
            $("input").prop("checked", false);
            $("#"+(index +1)).prop("checked", true);
        }, 3000);
    });
}

anim_loop(0); // start with the first element
$("input").click(function()
{
  $("div").fadeOut();
  clearTimeout(animLoop);
  anim_loop(parseFloat($(this).attr("id")));    
});

循环和Animate基于单选按钮单击

1 个答案: