仅在为图像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);
});