jQuery Анимации GIF

Check this page for a demo for background animation with jquery and this for its tutorial.

Sinan.

Сначала вы можете использовать фон нескольких div, поместив нужную часть изображения

css_background- position

Затем вам нужно отобразить div, поскольку он должен отображаться в зависимости от типа необходимой вам анимации.

If it's going to be constant and not event-driven, I'd recommend using gifs.

If, however, the animation is in response to something happening on the page, or if you only want it to start after everything is loaded, then jquery is probably the way to go.

You should just be able to change the image source (or the position offset if you're using a single image) to change the image. Have a look at some "pause" options in jQuery to delay changes between images.

Untested example (derived from Simon's answer in the link above):

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

Use animated GIFs - this is what they are made for. I'm sure its possible to hack together a solution using JQuery, but you would pay a cost in added development time and complexity.

Additionally, you should recognize that by going with a customized JQuery/CSS solution, you are making a decision to tightly couple your animation to the page that its on. What if someone wants to include the animation on a different page? They would have to copy over a bunch of code instead of a single GIF file. What if someone wants to include it in an email or Power-point presentation? Can't be done...

Можно ли объединить ваши четыре изображения в спрайт (1 реальный рисунок со всеми четырьмя изображениями без перекрытия)? С точки зрения производительности, клиентский браузер должен загрузить только одно изображение вместо того, чтобы делать 4 запроса для каждого из ваших четырех изображений.

Создание анимации было бы таким же простым, как использование техники, предложенной выше Damovisa, только делая это с использованием некоторого блочного элемента, устанавливая это одиночное изображение в качестве фона и устанавливая размер элемента равным размеру одной «плитки» одно изображение и изменение свойства css background-position. Я не совсем уверен в этом (пожалуйста, поправьте меня, если я ошибаюсь), но это кажется менее затратной операцией по перемещению фонового изображения, а не фактической заменой четырех разных изображений.