0

尽管所有关于 SO re 闪烁文本的帖子，我都没有找到完美的解决方案。大多数通过隐藏文本来闪烁文本 - 这意味着用户无法可靠地单击它（在隐藏周期期间，它不可单击）。

我已经从其他示例中抓取了一些零碎的内容来创建解决方案的开始，但是我在参数方面遇到了困难。

期望：

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

问题：

  • 在所需的迭代次数后闪烁不会停止（或0永远闪烁）。

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

这是我到目前为止的代码：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>

资料来源：
摩西·克里斯蒂安在这个 SO post
emgee 的jsFiddle中的回答

4

3 回答 3

3

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

添加了一个新的函数参数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);
    })
}
于 2013-07-05T17:46:00.830 回答
1

您的计数器不断被重置，因为它是在函数内部定义的。将变量移到函数之外修复了迭代：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'));
于 2013-07-05T17:36:38.227 回答
1

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

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

第二个是每次调用该函数时，都会将计数器重置为 0。您应该在此处的 return false 之前将其重置：

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

这是一个工作小提琴：http: //jsfiddle.net/CaVEx/2/

旁注：由于您基于 0 索引，因此将 15 作为迭代参数传递实际上会闪烁 16 次。

于 2013-07-05T17:39:32.133 回答