如何模拟人为的ajax搜索？

Question

All I want to do is this: reducing the opacity of an element and increasing it again after a short time. So I don't want to send any ajax request. Just I want to make a delay.

Something like this:

 $('button').on('click', function(){ $('.search_result').animate({ opacity: 0.3, }, 50); /* I need a delay here */ $('.search_result').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> 

As you see that process happens so fast. How can I implement a delay on the way of it? In other word how can I make it slow?

Answer 1

You can use delay(1000) in jquery to chain the methods.

 $('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>