jQuery Cycle одновременное исчезновение - PullRequest
Новая
       6

jQuery Cycle одновременное исчезновение

0 голосов
/ 10 февраля 2011

У меня проблема с плагином jQuery Cycle Lite (http://jquery.malsup.com/cycle/)

Изображения кажутся полностью блеклыми перед тем, как исчезнуть, и я хочу, чтобы они одновременно появлялись и исчезали. http://hardingandwhitlock.com/v6/content/background

У меня установлена ​​опция синхронизации 1 

$.fn.cycle.defaults = {
     timeout:       2000, 
     speed:         200, 
     next:          null, 
     prev:          null, 
     before:        null, 
     after:         null, 
     height:       'auto',
     sync:          1,    
     fit:           0,    
     pause:         0,    
     delay:         0,    
     slideExpr:     null  
};

любая помощь очень ценится!

Ответы [ 2 ]

1 голос
/ 10 февраля 2011

Это вызвано тем, что некоторые теги <br> вставлены между тегами <img>, и сценарий постепенно затушевывает эти входы / выходы между всеми изображениями

Сайт выполняется вDrupal, поэтому изображения должны быть вставлены в тело как 

<div id="slideshow"><img src="" /><img src="" />...</div>

вместо отдельных строк 

<div id="slideshow">
   <img src="" />
   <img src="" />
</div>

Кажется, что Drupal вставляет <br> между каждой отдельной строкой.Не уверен, что другие CMS будут делать то же самое

1 голос
/ 10 февраля 2011

Звучит так, будто вы пытаетесь сделать плавный переход от одного изображения к другому. Для этого вам понадобятся два изображения: 

<img id="backImg" />
<img id="frontImg" />

Установите #backImg позади #frontImg примерно так: 

#backImg
{
    position: absolute;
}

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

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

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

...