Good day! Faced such a task. There is a picture

<a class="title-item-event" href="#"> <img src="/image/width/115/44764-1480932675.jpeg" alt="" data="/image/width/580/44764-1480932675.jpeg">

In the field src="/image/width/115/44764-1480932675.jpeg" this is her grasp, in the field the link to the big picture is original data="/image/width/580/44764-1480932675.jpeg"> when the user presses on a small increase occurs

 $(document).ready(function(){ $(".title-item-event").click(function(){ var link = $($(this).children()).attr("src"); var full_link = $($(this).children()).attr("data"); $($(this).children()).attr("src", full_link); $(".b-featuredobjects-main .item").css("height", "400px"); }); });

Those. the contents of these fields just change. Everything works well, but there is a question: is it possible to make a smooth animation to this increase (smooth increase)?

Thank you in advance!

    1 answer 1

     $("img").click(function(){ $(this).animate({ // http://api.jquery.com/animate/ width: "256px", height: "256px", }, 1500 ); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="title-item-event" href="#"> <img src="http://podckaska.ru/wp-content/uploads/2014/08/kalendula-solnechnyj-cvetok-dlya-krasoty-i-zdorovya.jpg" width="128px" height="128px"> </a>