僅在為圖像Src設置邊距動畫時更改圖像Src

Question

出於瀏覽器游戲的目的，我只想在對圖像進行動畫處理時將圖像src更改為動畫gif。

$（the_image_selector）.animate（{marginLeft：amount}，時間）;

我該怎么做？

我的想法是在調用animate之前將圖像更改為gif，然后使用animate的回調來變回圖像。 能行嗎

Answer 1

是的，例如，我認為您的策略會奏效

var image = $(the_image_selector);

image.attr('src', 'url to show while animated');

image.animate({marginLeft: amount}, time, function(){
    image.attr('src', 'normal url');
});

Answer 2

您可以運行功能，然后動畫就完成了。 來自jquery.com

$( "#clickme" ).click(function() {
  $( "#book" ).css('background-image','any-image.gif');
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
  }, 5000, function() {
  // Animation complete.
     $( "#book" ).css('background-image','any-image.png');
  });
});

Answer 3

像這樣使用：

$(the_image_selector).css('background-image','path-to-image');
$(the_image_selector).animate({marginLeft: amount}, time);

或者，像這樣結合：

$(the_image_selector).css('background-image','path-to-image').animate({marginLeft: amount}, time);

或者，如果您想更改img的src，則：

$(the_image_selector).attr('src','path-to-image').animate({marginLeft: amount}, time);

Answer 4

演示小提琴

如我的評論所述，這將起作用：

var src = $('img').attr('src');
$('img').attr('src', 'https://disney-animation.s3.amazonaws.com/uploads/production/project_image/frozen/72/image/project_image.jpg');
$('img').animate({
    marginLeft: '100px'
}, 2000, function () {
    $(this).attr('src', src);
});