Синхронизированная анимация с помощью jQuery

Question

http://i28.tinypic.com/2j0zbxi.gif http://i28.tinypic.com/2j0zbxi.gif

Возможно ли это через jQuery?В основном, как показано на изображении выше, у меня есть синий фон, изображение карты и текстовые изображения.Я хочу добиться такого рода анимации при загрузке страницы или при загрузке этого изображения.

Answer 1

Вы захотите использовать комбинацию animate () и delay (), чтобы рассчитать время каждого слайда как раз.Вот пример того, что я недавно собрал, используя это.

http://www.panthersweat.com/thursday/

Answer 2

да, вы можете сделать это, смешав javscript и jquery ... я что-то сделал в баннере некоторое время назад ..

код следует

var timerCount = 1;
var timer = setInterval('sliderController()',5000);


function sliderController() {
    status = changeSlide(timerCount);
    if(status == 1) {
        timerCount++;
    }
    else{
        timerCount = 1;
    }
}

function changeSlide(timerCount)    {
    if(timerCount != 3) {
        leftValue = -1004 * timerCount;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 1;
    }
    else    {
        leftValue = 0;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 0;
    }

}

Я думаю, это поможет вам .......

Answer 3

Поскольку 1.4 в jQuery есть функция .delay (), которую вы можете использовать в анимации. Может быть, это то, что вам нужно?

Answer 4

Существуют различные способы показать ваши элементы с помощью jQuery UI.

Эта ссылка содержит несколько примеров: http://jqueryui.com/demos/show/

Answer 5

В основном это то, для чего предназначен janu .animate (). Вам придется выражать каждое необходимое состояние / шаг анимации с помощью CSS, но простая анимация, подобная приведенной выше, не должна быть проблемой.

http://api.jquery.com/animate/