2014-05-14 109 views
1

我想,當我點擊一個div,它與藍色邊框閃爍的發言權5次X閃爍div邊框?

這裏是我到目前爲止已經試過,但沒有奏效http://jsfiddle.net/655yk/1/

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

和HTML:

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

jQuery有沒有效果的方法.... –

+0

應該把它用不同的顏色閃爍,顯示/隱藏?需要更多信息 – Anton

+0

以紅色閃爍 –

回答

4

嘗試是這樣的,使用的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

+0

不是背景顏色,但邊框... 。 –

+0

@ C-link啊,沒有看到我會更新我的答案 – Anton

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/