How to animate multiple effects at same time using jQuery?

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>

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");
    });
});