Question

对于浏览器游戏目的，我想仅在图像动画时将图像src更改为动画gif。

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

我该怎么做？

我的想法是在调用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

你可以运行函数然后动画是complet。来自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

Demo Fiddle

如我的评论所述，这将有效：

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

仅在为其左边缘设置动画时更改图像Src

4 个答案:

Demo Fiddle