Question

我有一个图像，当它被点击时更改源URL并显示不同的图像，我想播放一个过渡，动画图像的大小变化。

启动HTML

<img src="http://pbs.twimg.com/media/DN1kd3vXkAE9UR-.jpg" class="selected-image" />

单击时，img源将更改为不同大小的图像。

我尝试了这个，但似乎不起作用：

.selected-image{
   transition: all 1s;
}

这是我的例子： https://jsfiddle.net/zfvrczs5/3/

Answer 1

一种选择是使用fadeOut()和fadeIn()。您可以将数字（以毫秒为单位）更改为您需要的数据。

fiddle

＆＃13;

$(".selected-image").on("click", function() {
  let image = "http://pbs.twimg.com/media/DN9MWb5WsAAaYYR.jpg";

  $(this).fadeOut(700, function() {
      $(this).attr('src', image);
    })
    .fadeIn(700);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://pbs.twimg.com/media/DN1kd3vXkAE9UR-.jpg" class="selected-image" />

<script src="jquery-3.2.1.min.js"></script>

＆＃13;

Answer 2

如果你想要调整大小，请使用animate并输入你需要的值

$(".selected-image").on("click", function () {
    var image = "http://pbs.twimg.com/media/DN9MWb5WsAAaYYR.jpg";

    $(this).animate({ width: 1000, height:700 }, "slow", function(){
       $(this).attr("src", image);
    });
});

在查找源URL时创建图像CSS转换

2 个答案: