jQuery анимация слева и внизу работает, но не сверху и справа

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

Вот jsfiddle: http://jsfiddle.net/QZWDs/

источник

2012-01-07 Tony

'' left' и top' являются позиции, а не команды, чтобы переместить направление. Таким образом, вы меняете левую позицию, чтобы объект двигался влево или вправо, и вы меняете верхнюю позицию, чтобы объект двигался вверх или вниз. Вместо слева и сверху вы можете использовать нижний и правый, но если вы смешаете левый и правый или верхний и нижний, вы получите беспорядок. Выберите один и только один в каждом направлении. – jfriend00

Элемент может иметь либо top или bottom положение и либо left или right. Нет смысла иметь все четыре. Используйте это, чтобы сделать анимацию вы хотите:

$(".block").animate({left:"150px"}, "slow") 
      .animate({top:"150px"}, "slow") 
      .animate({left:0},"slow") 
      .animate({top:0}, "slow");

Это использует только top и left позиции, чтобы оживить его. Также он использует цепочку, вместо того, чтобы вызывать $(".block") каждый раз, создавая новый объект jQuery.

источник

2012-01-07 05:48:46 Paulpro

http://jsfiddle.net/Paulpro/QZWDs/49/ – Paulpro

Отличная обратная связь - четкое объяснение того, что происходит. Спасибо, что показал мне цепочку! – Tony

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

попробовать этот

$("#right").ready(function(){ 

    $(".block").animate({left:"150px"},"slow", function() { 
     $(".block").animate({bottom:"150px"},"slow", function() { 
      $(".block").animate({left:"50px"},"slow", function() { 
      $(".block").animate({top:"0px"},"slow"); 

      }); 
     }); 

    }); 
});

источник

2012-01-07 05:51:29 Murtaza

Не нужно использовать функции завершения, подобные этому. несколько анимаций на одном объекте автоматически ставятся в очередь и будут выполняться последовательно по умолчанию. Это не нужно. – jfriend00

Существует ли какой-либо недостаток использования обратных вызовов здесь, он функционирует одинаково. я хочу сказать, что я не ошибаюсь в своем ответе, но что делает его менее оптимизированным. Пожалуйста, объясните немного, так как я новичок в jQuery, я узнал об этом самостоятельно. – Murtaza

Несколько недостатков вашего метода: 1) Вы создаете новый объект jQuery для каждого вызова анимации вместо цепочки одного объекта, как в ответе user1. 2) Вложение нескольких функций завершения - это еще более сложный код для написания и понимания, чем позволить очереди анимации делать для вас работу - более простой код, который работает так же хорошо, всегда лучше. 3) При использовании цепочки метод '.stop()' дает вам контроль над тем, что делать с другими анимациями в очереди, и у вас нет такого уровня управления с вложением функции завершения. – jfriend00

jQuery анимация слева и внизу работает, но не сверху и справа

ответ

Смежные вопросы