Question

我希望当我点击一个div时，它的边框会闪烁蓝色，表示5次

这是我到目前为止所尝试的但是它没有用http://jsfiddle.net/655yk/1/

 $("div").click(function () {
  $(this).effect("highlight", {}, 3000);
 });

和Html：

 <div style="border:1px solid ">Heki </div>

Answer 1

尝试这样的事情，使用setInterval

$("div").click(function () {
    var cnt = 0;
    $this = $(this);
    var timer = setInterval(function () {
        cnt++
        if (cnt == 6) {
            $this.css('border', '1px solid');
            clearInterval(timer);
        } else {
            cnt % 2 == 1 ? $this.css('border', '1px solid red') : $this.css('border', '1px solid');
        }
    }, 1000);
});

DEMO

Answer 2

你也可以尝试这样的事情：

JS：

var colors = ['fc0000', '', 'fc0000', '', 'fc0000', '', 'fc0000', ''];

function animateBorder(element, x, time) {
    if (x >= colors.length) {
        x = 0;

    } else {
        x++;
        var color;
        if ( colors[x] === '' ) {
            color = ''
        } else {
            color = '#'+colors[x]
        }        
        element.css('border-color', color)
        setTimeout(function() {
            animateBorder(element, x, time);
        }, time)

    }
}


$('div').click(function() {
    var ele = $(this);
    var time = 500 //ms
    animateBorder(ele, 0, time);
})

我创造了一个小提琴：http://jsfiddle.net/655yk/7/

闪烁div边界X倍？

2 个答案: