Анимировать абсолютный div влево: 0, затем вправо: 0 и зациклить

Хорошо, я знаю, как анимировать div и зацикливать анимацию и все такое, но это действительно действует мне на нервы, я хочу анимировать div до left:0;, а затем до right:0; и зацикливать анимацию, и ЭТО НЕ БУДЕТ РАБОТАТЬ так... Почему что?

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

PS: Очевидно, jquery не может анимировать абсолютный контейнер слева: 0 вправо: o ... но как я могу получить желаемую анимацию?

Пример:

Что-то вроде этого не будет работать...:

$(document).ready(function() {   
function animateMydiv() {
$('#mydiv').animate({'left':'0px'},6000).animate({'right':'0px'},6000, animateMydiv); 
}

animateMydiv();
});

Вот jsfiddle.


jquery absolute jquery-animate
person Alin    schedule 25.11.2014    source источник
comment
Можете ли вы создать jsfiddle для своего кода?   -  person nils    schedule 25.11.2014
comment
@появление Минуточку   -  person Alin    schedule 25.11.2014
comment
@emergence проверьте обновление.   -  person Alin    schedule 25.11.2014

Ответы (2)


arrow_upward
2
arrow_downward

Насколько я понимаю позиционирование в CSS, вы не можете одновременно установить значения right и left.

Поэтому я бы предложил следующее. Просто переместите его в конец документа минус ширина элемента:

$(document).ready(function() {

  var width = $(document).width() - $('#mydiv').width();

  function animateMydiv() {
    $('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000);

  }

  animateMydiv();

});

Проверьте скрипт: http://jsfiddle.net/bc927afp/1/

И если вы хотите, чтобы он был бесконечным, оставьте функцию, как в вашем примере: $('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000, animateMydiv);

person nils    schedule 25.11.2014
comment
Это как раз то, что я писал прямо сейчас :)) и да, вы можете одновременно установить левое и правое значение в 0, и если вы добавите margin: auto, он поместит центральную страницу div, но это не главное, Я также пробовал, когда слева было 0 , справа было авто и наоборот, но это не сработало ^^ В любом случае, это работает хорошо, спасибо! +1 и принять! - person Alin; 25.11.2014
comment
Спасибо. (Вы также можете использовать margin: auto без position: absolute) - person nils; 25.11.2014
comment
Ну, я знаю, но для того, чтобы div располагался по центру страницы и вам нужно было, чтобы он имел position:absolute, вам нужно было бы добавить left:0; справа: 0; поля:авто; ... если вам не нужно, чтобы он был абсолютным, и он работает так же хорошо с относительным, тогда margin:0 auto; сделает свое дело :D - person Alin; 25.11.2014

arrow_upward
0
arrow_downward

Как уже было сказано в другом ответе: вы в принципе не можете анимировать от left до right. Таким образом, ключ к решению этой проблемы заключается в использовании только одного из них.

Исходное положение слева:

left: 0%;
transform: translationY(0%);

Конечная позиция справа:

left: 100%;
transform: translationY(-100%);

Все, что вам нужно сделать сейчас, это анимировать свойства left и transform. Недавно я записал более подробное объяснение, а также продемонстрировал анимацию на основе CSS по адресу https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css.-основанныйнапроценте-5fea0799a589.

person Taig    schedule 02.05.2020