Cycle.js IE7 / 8 нажатие на пейджер заставляет его мигать, а не исчезать - PullRequest
1 голос
/ 29 сентября 2011

Я использую Cycle.js для проекта. Я создал статическую область навигации и с помощью пейджера: в цикле позволяет пользователю выбирать, какой слайд увидеть. Все выглядит хорошо во всех основных браузерах, FF, Safari, Chrome, IE9 и т. Д. Однако в IE 7 и 8 он не исчезает, как ожидалось. Он мигает белым, затем появляется следующий слайд. Я озадачен, почему это так.

Если я вообще уберу пейджинг и установлю тайм-аут на 3000, например, он просто исчезнет. Что-то не так с пейджером? Я просто использовал его прямо из примера с сайтом проекта Cycle.js (за исключением того, что изменил значение индекса, как указано ниже), видимого здесь .

jQuery(function($){
        $('.Slides').cycle({ 
            fx:     'fade', 
            timeout: 0,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx,slide){
                idx -= 1 // we don't want the first slide so reduce the index # by 1
                return '#nav div:eq(' + idx + ') ';
            } 
        });

HTML выглядит довольно просто, примерно так:

        <div id="nav">
            <div id="stage_1"></div>
            <div id="stage_2"></div>
            <div id="stage_3"></div>
        </div>

Эта разметка скоро изменится, но пока не понимаю, как это может быть связано с рассматриваемой проблемой.

Есть идеи? Спасибо.

1 Ответ

1 голос
/ 29 сентября 2011

Я понял, в чем была моя ошибка. HTML-код, содержащий слайды, содержит контейнер и два других элемента, img и a. Довольно простые вещи:

<div class="slide">
  <img src="path_to_my_img" />
  <a href="path_to_another_page">Link Text</a>
</div>

И переход только вызывал мигание, и следующий момент показался бы только после того, как показывал только белый цвет. Переход не будет работать (fade, turnDown и т. Д.). Чтобы это исправить, мне просто нужно было добавить цвет фона к контейнеру div, что я сделал в условном IE. Для меня это работает, так как размер img такой же, как у div, и якорь абсолютно позиционирован.

...