jQuery animate () не работает, но css () работает - PullRequest
Новая
       5

jQuery animate () не работает, но css () работает

0 голосов
/ 27 марта 2012

Я создаю несколько скользящих панелей (аккордеон) и хочу сдвинуть фоновое изображение так, чтобы часть фона всегда показывалась. У меня проблемы с анимацией панелей, но CSS работает нормально. e.g.:

if(slideIndex == index) {
    $this.children('.heading').children().children().fadeIn(settings.slideSpeed);
    $this.children('.heading').animate({height: 250});
} else {
    $this.children('.heading').children().children().not('.panel-strip').fadeOut(settings.slideSpeed);
    $this.children('.heading').animate({height: 500});
}

Не работает, но если я подставлю в css вместо animate, оно будет работать.

HTML-код <div class="panels-background heading">, к которому я пытаюсь получить доступ.

JavaScript адаптирован из liteAccordion .

jsFiddle: http://jsfiddle.net/beaverusiv/GGd38/4/ поиск «КОД» в javascript для соответствующей области.

Ответы [ 2 ]

2 голосов
/ 27 марта 2012

Проблема прямо под тем блоком кода, куда вы звоните: 

$this
     .children('.heading')
     .stop(true)
     .animate({
          left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth
      }, 
     settings.slideSpeed, 
     settings.easing,
     function() { 
         // flag ensures that fn is only called one time per triggerSlide
         if (!core.slideAnimCompleteFlag) {
             settings.onSlideAnimComplete.call(next);
             core.slideAnimCompleteFlag = true;
         }
     });

Когда вы звоните .stop(), это останавливает анимацию высоты, которую вы пытаетесь вызвать раньше.

1 голос
/ 27 марта 2012

Однажды у меня была похожая проблема; казалось, что свойство animate не будет работать так, как предлагалось при использовании только jQuery. Провел небольшое исследование, добавил библиотеку пользовательского интерфейса jQuery просто так. И это сработало. В конце я включил файл библиотеки jQuery UI Effect, и он работал как ад.

В документации (http://docs.jquery.com/UI/Effects/animate) говорится, что библиотека эффектов пользовательского интерфейса расширяет функцию анимации для поддержки цветов, но для меня это также помогло в анимации высоты. Не знаю, почему ..

Для загрузки этого перейдите http://jqueryui.com/download выберите Core и UI эффекты внизу. Оставьте остальные не отмеченными (если вы хотите получить решение в файле размером около 8 КБ). Затем вы получите zip-файл для загрузки.

В этом zip-каталоге goto js; выберите файл с именем что-то вроде jquery-ui-1.8.18.custom.min.js и включите его на свою страницу. Я думаю, что это будет делать. снова вы можете добавить кулер эффекты, такие как слайд, коробка, взорваться и т. д. Я думаю, вам не нужны дальнейшие инструкции

...