我怎样才能模仿人为的ajax搜索？

Question

我想做的就是：减少元素的不透明度，并在短时间后再次增加。所以我不想发送任何ajax请求。我只是想拖延。

这样的事情：

＆＃13;

＆＃13;

$('button').on('click', function(){

  $('.search_result').animate({
				    opacity: 0.3,
				  }, 50);
          
   /* I need a delay here */
          
   $('.search_result').animate({
				    opacity: 1,
				  }, 50);         
})

＆＃13;

p {
  border-bottom: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<button>seach</button>
<div class="search_result">
  <p>post1</p>
  <p>post2</p>
  <p>post3</p>
  <p>post4</p>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的那样，过程发生得如此之快。我怎样才能实现延迟呢？换句话说，我怎么能让它变慢？

Answer 1

您可以在jquery中使用delay(1000)来链接方法。

＆＃13;

＆＃13;

$('button').on('click', function() {

  $('.search_result').animate({
      opacity: 0.3,
    }, 50).delay(1000)
    .animate({
      opacity: 1,
    }, 50);
})

＆＃13;

p {
  border-bottom: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<button>seach</button>
<div class="search_result">
  <p>post1</p>
  <p>post2</p>
  <p>post3</p>
  <p>post4</p>
</div>

＆＃13;

＆＃13;

＆＃13;