1

だから、グロー効果でテキストボックスを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');
    };
4

5 に答える 5

3

ライブデモ

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);
});
于 2013-10-29T11:48:47.530 に答える
2

多分その 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);
于 2013-10-29T11:41:37.553 に答える
0 
#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));
 }
于 2013-10-29T11:35:59.583 に答える