追蹤來源網址時創建圖片CSS過渡

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() 。 您可以將數字（以毫秒為單位）更改為所需的數字。

小提琴

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

 <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> 

Answer 2

如果您希望調整大小，請使用動畫並輸入所需的值

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