Qquery, увеличение фотографии

287

26 января 2017, 01:08

Добрый день! Столкнулся с такой задачей. Есть картинка

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

В поле src="/image/width/115/44764-1480932675.jpeg" это её привью, в поле ссылка на большую картинку оригинал data="/image/width/580/44764-1480932675.jpeg">, когда пользователь жмёт на маленькую происходит увеличение

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

Т.е. содержимое этих полей просто меняются. Всё работает хорошо, но есть такой вопрос: можно ли к этому увеличению сделать плавную анимацию (плавное увеличение)?

Заранее спасибо!

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>