JQuery Animation: Animate DIV слева направо с разной скоростью, чем сверху вниз

0

пытаясь оживить 1 DIV с определенной скоростью слева направо (и обратно), а также оживить его сверху вниз (и обратно) с другой скоростью (по существу создавая эффект заставки, подобный окну).

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

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

есть идеи? Большое спасибо.

код до сих пор:

$(document).ready(function() {

    updateWindowsize();
    $(window).resize(function() {
        updateWindowsize();
    });
    bounceBounce();

});

var imageWidth = '540'
    imageHeight = '705'

function updateWindowsize() {
    var $window = $(window);
    windowHeight = $window.height();
    windowWidth = $window.width();
}

function bounceBounce() {

    $('.div-1').animate({"left": windowWidth - imageWidth}, 3000, 'linear',
          function(){ $(this).animate({left: 0}, 3000, 'linear');
    });

    $('.div-1').animate({"top": windowHeight - imageHeight}, 6000, 'linear',
          function(){ $(this).animate({top: 0}, 6000, 'linear');
    });

    bounceBounce();

};
Теги:
animation

1 ответ

0

Вы пробовали это:

$('.div-1').animate({"left": windowWidth - imageWidth, "top": windowHeight - imageHeight}, 6000, 'linear',
      function(){ $(this).animate({left: 0, top: 0}, 6000, 'linear');
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню