ajaxの検索をエミュレートするにはどうすればよいですか？

Question

私がしたいのは、要素の不透明度を減らし、短時間のうちに再び増加させることです。だから、私はAJAXリクエストを送るつもりはない。ちょうど私は遅れを取りたいです。

このような何か：

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

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

p { 
 
    border-bottom: 1px solid; 
 
}

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

を使用すると、プロセスが非常に速く起こることを見るように。どのように私はそれの途中で遅延を実装することができますか？言い換えれば、どうすればそれを遅くすることができますか？

Answer 1

delay(1000)をjqueryで使用すると、メソッドを連結できます。

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

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

p { 
 
    border-bottom: 1px solid; 
 
}

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