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

也许是这样的的 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 3

#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 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/

CSS / HTML / JQuery - 如何使文本框以发光效果闪烁？

5 个答案: