Question

我使用下面的jquery方式来眨眼我的div：

<div class="blink">blinking text</div>non-blinking
<div class="blink">more blinking text</div>

function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('.blink');

但我们如何阻止它眨眼？我只想让它眨眼5次。

Answer 1

你可以单独用CSS实现这一点，不需要Javascript：

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.blink {
    -webkit-animation: blinker 1s 5;
    -moz-animation: blinker 1s 5;
    animation: blinker 1s 5;
}

Updated fiddle

请注意，语句末尾的5值为animation-iteration-count。您可以根据需要进行修改。

Answer 2

这是解决方案，

试试这个

var i = 0;

function blink(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
            i++ < 8 && blink(this);
        });

    });
}

blink('.blink');

这是演示： Fiddle

如何阻止闪烁的div？

2 个答案: