Question

我有这段代码：

$(input).keyup(function() {

    var searchTerms = getSearch();
          doSearch(searchTerms); 

});

函数doSearch为我提供了结果列表（搜索结果）。我想模仿谷歌通过'淡化'键盘上的结果然后设置一个计时器或事件.delay然后执行提供结果的功能，所以：

keyup - ＆gt;淡出50％
等一段时间
执行功能doSearch(searchTerms);

我知道如何做这些事件，但我似乎无法把它们放在一起。

Answer 1

使用jQuery的fadeTo：http://api.jquery.com/fadeTo/和JS'自己的setTimeout来执行此操作。有点像：

$('#myInput').keyup(function(){
   $('.stuffToFade').fadeTo('fast',0.5,function(){ //fade all '.stuffToFade' elements to 0.5 and execute the following callback
      setTimeout(function(){ //the following function will be executed after 500ms
         var searchTerms = getSearch();
         doSearch(searchTerms);
      }, 500); //this is where the delay is set
   });
});

Answer 2

jQuery碰巧有两件事要解决这个问题。

.delay()

和

jQuery.queue()

如果你想延迟，例如您需要在fx队列或单独队列中对其进行排队的触发器功能。这是如何工作的：

$("#myElement").delay(2000).queue(function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
  $(this).dequeue(); 
});

如果您不想使用默认的fx-queue，这就是如何在自己的队列中对函数进行排队：

$("#myElement").delay(2000, "myQueue").queue("myQueue", function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
}).dequeue("myQueue");

Answer 3

单击处理程序的功能：

$(this).click(function(){
   doSomeFunction(variable);
});

OR自定义事件：

$(this).doSearch(function(searchTerms){
    getyourSearchOn();
});

用'Jquery延迟'和'fadeOut'模仿谷歌

3 个答案: