Проблема с jQuery's .animate()

Я использую .animate(), чтобы плавно переместить несколько divs после того, как они были видны через .show («slow»). Поскольку divs может или не может выполнять анимацию, я также использую .queue(), чтобы убедиться, что этот шаг происходит после завершения анимации.Проблема с jQuery's .animate()

Задача: .animate() не работает. Он попадает в правильную строку кода, но ничего не делает и не вызывает никаких ошибок. Помогите?

Javascript:

function arrange_sections() { 
     var margin = 20; 
     var left = margin; 
     $(".section.active").queue(function() { 
      $(".section.active").each(function() { 
       $(this).animate({ "left": left }, "slow"); 
       left += $(this).width() + margin; 
      }); 
     }); 
}

CSS:
(я использую шоу ("Медленный"), чтобы привести разделы из дисплея: нет)

.section { 
    display: none; 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    padding: 20px; 
    z-index: 20; 
}

источник

2010-01-23 asmodi

Если «.секция» и «.активные» классы имеют пространство между ними .section .active '). Другими словами: вы проверили, что запрос css-запроса находит нужные элементы? Вы также можете назначить результат $ ('. Section.active') переменной вместо создания объектов дважды. –

Я имею в виду выбрать пересечение .section и .active, так что да, отсутствие пробела верное. Используя Firebug, я определил, что он попадает в строку .animate(), и если я заменю строку .animate() другой функцией, например .css(), она отлично работает. – asmodi

Алекси - вы были правы в создании $ ('. Section.active') дважды. Первоначально у меня было «$ (это)», но изменил его мышление (по какой-то причине), что queue() повлияет только на первый объект, если было выбрано более одного объекта. На самом деле я непреднамеренно заставил мою функцию называться больше, чем я хотел! – asmodi

Наконец-то нашел ответ. Все, что мне нужно было сделать, это включить функцию dequeue() в конце функции, которую я передал в очередь().

Спасибо за помощь, ребята!

источник

2010-01-23 06:32:52 asmodi

моей догадки: вам нужен стиль «позиция: относительный»; или «позиция: абсолютная»; добавлен в ваш CSS.

Я попытался запустить код, но ничего не увидел. Однако, когда я использовал вкладку HTML Firebug для просмотра страницы, я видел, что большинство из них имели стиль = «left: 140px» или аналогичный.

источник

2010-01-23 05:30:29

спасибо за догадки - к сожалению, это не так. Теперь я включил свой код CSS, если есть какие-то подсказки. – asmodi

Интересно, что это сработало для вас. Я попытаюсь изолировать эту функцию от моего другого кода и исправления ошибок таким образом. – asmodi

Он, похоже, работает и с Google Chrome. Может быть, нам нужно увидеть больше контекста, чтобы узнать, что происходит в вашем случае. –

+1 что Дэвид сказал о позиционировании. Вероятно, ваши секции должны располагаться абсолютно внутри относительно позиционированного div. Кроме того, я не думаю, что вам нужен метод jQuery/Queue. Попробуйте это вместо этого:

$(".section.active").each(function() { 
    $(this).show("slow", function() { 
    $(this).animate({ "left": left }, "slow"); 
    left += $(this).width() + margin; 
    });     
});

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

На основании того, что я читал в jQuery docs, похоже, что все функции анимации автоматически добавляются во встроенную очередь fx.

источник

2010-01-23 06:10:47 patrickmcgraw

Проблема с jQuery's .animate()

ответ

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