Изменить изображение Src только при анимации его поля слева

Question

Изменить изображение Src только при анимации его поля слева

0

Для цели браузера я хочу изменить изображение src в анимированный gif только тогда, когда изображение анимируется.

$ (the_image_selector).animate({marginLeft: количество}, время);

Как мне это сделать?

Моя идея - изменить изображение на gif перед вызовом анимации, а затем использовать анимационный обратный вызов для изменения изображения. Это будет работать?

Sarchophagi 17 апр. 2014, в 12:25

Источник

0

My idea is to change the image to the gif before calling animate, then use animate's callback to change back the image. Will it work? - да! попробуй
SW4 17 апр. 2014, в 09:32

Теги:

javascript

jquery

html

css

animation

4 ответа

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

kpblc 17 апр. 2014, в 07:56

0

до анимации не после завершения !!!!
Bhojendra Rauniyar 17 апр. 2014, в 09:35
0

если совмещу мой и тебе ответь будет хорошо). после завершения анимации ему нужно поменять img обратно (png -> gif -> png)
kpblc 17 апр. 2014, в 09:40
0

сделать изменения .... тогда .....
Bhojendra Rauniyar 17 апр. 2014, в 09:40
0

уже сделал! спасибо за исправление)
kpblc 17 апр. 2014, в 09:42
0

да, ты был абсолютно прав +1
Bhojendra Rauniyar 17 апр. 2014, в 09:47
0

Спасибо! но @Andreas и вы даете более правильные ответы, потому что user1190288 спрашивает непосредственно о теге img, а не о bg-image). для топика-стартера и всех остальных - лучше использовать bg-image, чтобы вы могли собирать изображения в один большой спрайт и просто менять bg-позицию. В этом случае спрайт полностью загружен и не будет мерцать из-за загрузки изображения.
kpblc 17 апр. 2014, в 10:03

Показать ещё 4 комментария

0

Используйте следующее:

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

Bhojendra Rauniyar 17 апр. 2014, в 07:05

0

Демо-скрипт

Как отмечено в моем комментарии, это будет работать:

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

SW4 17 апр. 2014, в 06:48

Ещё вопросы

My idea is to change the image to the gif before calling animate, then use animate's callback to change back the image. Will it work? - да! попробуй
до анимации не после завершения !!!!
если совмещу мой и тебе ответь будет хорошо). после завершения анимации ему нужно поменять img обратно (png -> gif -> png)
уже сделал! спасибо за исправление)
Спасибо! но @Andreas и вы даете более правильные ответы, потому что user1190288 спрашивает непосредственно о теге img, а не о bg-image). для топика-стартера и всех остальных - лучше использовать bg-image, чтобы вы могли собирать изображения в один большой спрайт и просто менять bg-позицию. В этом случае спрайт полностью загружен и не будет мерцать из-за загрузки изображения.

Andreas · Accepted Answer · 2014-04-17T06-56-00.000Z

Да, я думаю, ваша стратегия будет работать, например

var image = $(the_image_selector);

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

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