0

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

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

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

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

0

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.