I am using jQuery’s animate()
function to animate a div
. When I give multiple effects like height 140 and width 200, then the next effects start only after the previous effects finish. I want to execute simultaneously. Any help will be appreciated.
$(document).ready(function(){ $(".gal_item").hover(function(){ $(this).children().animate({height:110},"medium"); $(this).children().animate({width:110},"medium"); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gal_item"><img src="images/2.jpg" width="120" height="100" /></div> <div class="gal_item"><img src="images/3.jpg" width="120" height="100" /></div>
Advertisement
Answer
The animate method accepts multiple style declarations, you can simply…
$(document).ready(function(){ $(".gal_item").hover(function(){ $(this).children().animate({ height:110, width: 110 }, "medium"); }); });