控制div的淡出和淡出

时间:2013-12-21 05:23:53

标签: javascript jquery html

我希望#preview在每次更改#companyName时都会闪烁。

此外,我希望#preview在我停止对#companyName进行2秒更改后停止1秒

  <html>
      <body>
          <div id="edit">
                  <label>Company Name: </label>
                  <input type="text" id="companyName" />
          </div>
          <div id="preview">
                  <label id="preview" style ="font-size: 20px;">
                          This is my company
                  </label>
          </div>
      <script>

      $('#companyName').keyup(function() {
          delay(function(){
            var value = $(this).val();
            $('#preview').fadeOut().fadeIn();  
            $("#preview").text(value);

          }, 2000 );
      });


      var delay = (function(){
        var timer = 0;
        return function(callback, ms){
          clearTimeout (timer);
          timer = setTimeout(callback, ms);
        };
      })();

      </script>
 </body>

1 个答案:

答案 0 :(得分:0)

如果你想在keyup上闪烁#preview并在2secs之后恢复它,你可以做的是,

$('#companyName').keyup(function() {
     var $prev=$('#preview').fadeOut().fadeIn();   
     delay(function(){          
        $prev.html($(this).val()).fadeIn();  
     }, 2000 );
});

希望这有帮助。 !

修改

延迟功能应如下所示,

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

在这里,我已经看到你有硬编码1000毫秒,我想不会工作。