jQuery可单击闪烁文本div

Question

尽管所有的帖子都是闪烁的文字，我并没有找到一个完美的解决方案。大多数人通过隐藏文本来眨眼--这意味着用户无法可靠地单击它(在隐藏的循环中，它是不可点击的)。

我从其他示例中挑选了一些片段来创建解决方案的开始，但我在参数方面遇到了困难。

所需：

$('#selector').click(function() {
    blink(this, speed, iterations); //iterations==0 for unlimited iterations
});

问题：

• 闪烁不会在期望的迭代次数之后停止(或者0永久闪烁)。

请注意，我不希望使用.hide、.toggle、.fade或任何其他使div在闪烁周期的“不可见”期间不可点击的jQ方法。

下面是我到目前为止拥有的代码：jsFiddle

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                var pad = 0;

                $('#clignotant').click(function() {
                    if (pad==0) {
                        pad++;
                        blink(this, 800, 15);
                    }else{
                        alert('Not document.load, so now send user to the streaming video');
                    }
                });

                function blink(selector, blink_speed, iterations){
                    counter = 0;
                    $(selector).animate({opacity:0}, 50, "linear", function(){
                        $(this).delay(blink_speed);
                        $(this).animate({opacity:1}, 50, function(){
                            if (iterations == 0) {
                                blink(this, blink_speed, iterations);
                            }else if (counter>iterations) {
                                return false;
                            }else{
                                counter++;
                                blink(this, blink_speed, iterations);
                            }
                        });
                        $(this).delay(blink_speed);
                    });
                }

                //This line must come *AFTER* the $('#clignotant').click() function !!
                window.load($('#clignotant').trigger('click'));


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="clignotant" style="background-color:#FF6666;width:500px;
    height:100px;line-height:100px;text-align:center;">
        This box, and the text in it, are blinking
    </div>

</body>
</html>

资料来源：

摩西·克里斯蒂安的回答在这篇文章里

埃米氏jsFiddle

Answer 1

这个解决方案不使用全局变量，如果可能的话，这是要避免的。

增加了一个新的函数参数counter。在初始闪烁时，counter不会被传递，并且将被初始化为0，因为它是未定义的。对于每个animate函数，counter增加一个。其他的都是你的原始代码。

jsFiddle

function blink(selector, blink_speed, iterations, counter){
    counter = counter | 0;
    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(blink_speed);
        $(this).animate({opacity:1}, 50, function(){
            counter++;

            if (iterations == 0) {
                blink(this, blink_speed, iterations, counter);

            }else if (counter >= iterations) {
                return false;
            }else{
                blink(this, blink_speed, iterations, counter);
            }
        });
        $(this).delay(blink_speed);
    })
}

Answer 2

您的计数器一直被重置，因为它是在函数中定义的。将变量移出函数外修正了迭代：http://jsfiddle.net/CaVEx/1/

var pad = 0;

$('#clignotant').click(function() {
    if (pad==0) {
        pad++;
        blink(this, 800, 2);
    }else{
        alert('Not document load, so now you can go to the streaming video');
    }
});
counter = 0;
function blink(selector, blink_speed, iterations){

    $(selector).animate({opacity:0}, 50, "linear", function(){
        $(this).delay(blink_speed);
        $(this).animate({opacity:1}, 50, function(){
            if (iterations == 0) {
                blink(this, blink_speed, iterations);
            }else if (counter>iterations) {
                return false;
            }else{
                counter++;
                blink(this, blink_speed, iterations);
            }
        });
        $(this).delay(blink_speed);
    });
}

//This line must come *AFTER* the $('#clignotant').click() function !!
window.load($('#clignotant').trigger('click'));

Answer 3

您正在使用计数器来计算您执行了多少次迭代，但是这个var有两个问题。

第一个问题是，您永远不会在函数之外声明它。它在函数完成时被擦除，当您调用它时被重新创建。

第二个问题是，每次调用该函数时，都会将计数器重置为0。您应该在返回false之前重置它：

else if (counter>iterations) {
    counter = 0;
    return false;
}

这里是一个有用的小提琴：http://jsfiddle.net/CaVEx/2/

附带注意:由于您是基于0索引的，因此作为迭代参数传递15实际上会闪烁16次。