CSS/HTML/JQuery - 我如何讓文本框閃爍發光效果？

Question

所以，我一直在試圖讓一個文本框閃爍3次，具有發光效果。 但我只能讓它閃爍一次。

有人可以看看這個，也許可以幫助我嗎？

HTML

<input id="asktextsearch" name="search" type="text" placeholder="bla bla" /> 

CSS

#asktextsearch{ 
    height: 20px; 
    width: 440px; 
    font-size: 12px; 
    color: Grey; 
    border: thin solid #CACACA; 
    //margin-top: 60px; 
    /* [disabled]border-radius: 10px 10px 10px 10px; */ 

    outline:none; 
    transition: all 0.25s ease-in-out; 
    -webkit-transition: all 0.25s ease-in-out; 
    -moz-transition: all 0.25s ease-in-out; 
} 

#asktextsearch:focus { 
    box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
    -webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
    -moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
} 

JQuery的

for(i=0;i<3;i++){ 
     alert(i); 
     $('#asktextsearch').focus(); 
     //$('#asktextsearch').addClass(':focus'); 
    }; 

Answer 1

LIVE DEMO

JS：

$(function(){ 

    var count = 0, 
     $input = $('#asktextsearch'), 
     interval = setInterval(function() { 

    if ($input.hasClass('blur')) { 

      $input.removeClass('blur').addClass('focus'); 
      ++count; 

    } else { 

      $input.removeClass('focus').addClass('blur'); 
    } 

     if (count === 3) { 

      clearInterval(interval); 
     } 

    }, 300); 
}); 

Answer 2

#asktextsearch{ 
height: 20px; 
width: 440px; 
font-size: 12px; 
color: Grey; 
border: thin solid #CACACA; 
//margin-top: 60px; 
/* [disabled]border-radius: 10px 10px 10px 10px; */ 

outline:none; 
transition: all 0.25s ease-in-out; 
-webkit-transition: all 0.25s ease-in-out; 
-moz-transition: all 0.25s ease-in-out; 
} 

.blink { 
box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
-webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
-moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
} 

而且在JavaScript：

for(i=1; i <= 5; i++){   
    $('#asktextsearch').focus(); 
    setTimeout(function(){ 
     $('#asktextsearch').toggleClass('blink'); 
    }, (300 * i)); 
} 

Answer 3

也許類似的東西 CSS

#asktextsearch{ 
height: 20px; 
width: 440px; 
font-size: 12px; 
color: Grey; 
border: thin solid #CACACA; 
//margin-top: 60px; 
/* [disabled]border-radius: 10px 10px 10px 10px; */ 

outline:none; 
transition: all 0.25s ease-in-out; 
-webkit-transition: all 0.25s ease-in-out; 
-moz-transition: all 0.25s ease-in-out; } 

#asktextsearch.focus { 
box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
-webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
-moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1); } 

JS

var count = 0; 
var p = setInterval(function(){ 
if(count==6) 
    window.clearInterval(p); 
$('#asktextsearch').toggleClass("focus"); 
count++;  
},500); 

Answer 4

希望它有幫助！我已經以有限的理解起草了代碼，您可以根據需要自定義代碼。

var counter = 0; 
    var ID; 
     $(document).ready(function() { 
      $("#asktextsearch").focus(function(){ 
       counter = 0; 
        $(this).addClass('focusing'); 
        setTimer(); 
       });  
     }); 

    function setTimer(){   
     ID = setInterval(function() { 
       startSlider(counter); 
       counter++; 
       console.log(counter); 
      }, 4000); // adjust delay here  

    } 

function startSlider(){ 
    if(counter>3){ 
     stopFocus(); 
     clearInterval(ID);   
    }else{ 
    $('#asktextsearch').toggleClass('focusing'); 
    } 
} 

function stopFocus() { 
    $("#asktextsearch").removeClass('focusing'); 
} 

CSS：

#asktextsearch{ 
     height: 20px; 
     width: 440px; 
     font-size: 12px; 
     color: Grey; 
     border: thin solid #CACACA; 
     outline:none; 
     transition: all 0.25s ease-in-out; 
     -webkit-transition: all 0.25s ease-in-out; 
     -moz-transition: all 0.25s ease-in-out; 
    } 

    .focusing { 
     box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
     -webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
     -moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
    } 

演示鏈接：http://jsfiddle.net/7ABNY/

Answer 5

CSS：

#asktextsearch{ 
    height: 20px; 
    width: 440px; 
    font-size: 12px; 
    color: Grey; 
    border: thin solid #CACACA; 
    //margin-top: 60px; 
    /* [disabled]border-radius: 10px 10px 10px 10px; */ 
    outline:none; 
    transition: all 0.25s ease-in-out; 
    -webkit-transition: all 0.25s ease-in-out; 
    -moz-transition: all 0.25s ease-in-out; 
} 

#asktextsearch:focus { 
    box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
    -webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
    -moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1); 
} 
     .blink { 
      animation: blink 1.5s steps(3, start) 3; 
      } 

     @keyframes blink { 
      to { 
      visibility: hidden; 
       } 
      } 

HTML：

<div class="blink"> 
      <input id="asktextsearch" name="search" type="text" placeholder="bla bla" /> 
    </div> 

演示：http://jsfiddle.net/rakeshgajjar/TNDyL/