2010-07-07 1 views
6

Я большой поклонник jquery cycle plugin, но было бы здорово, если бы у него были более сложные эффекты перехода, похожие на Nivo Slider или jqFancyTransistions.Есть ли способ создать эффекты перехода полосы, похожие на Nivo Slider с циклом jquery?

Я понимаю, как создавать пользовательские эффекты с помощью jquery-цикла, но мне сложно найти способы создания эффектов перехода полосы, аналогичные слайдеру nivo и jqfancytransitions, или если это возможно вообще цикл jquery. Любая помощь по этому вопросу будет принята с благодарностью. Благодаря!

+1

Hi. Мне тоже интересно это ... очень нравится эффект слайдера Nivo: D – Alex

+1

монета слайдера тоже очень круто: http://workshop.rs/projects/coin-slider/ – Alex

+0

Думаю, это очень просто. Дело в том, что вам нужно играть с divs и их фоновым изображением. Просто просмотрите html-код (http://nivo.dev7studios.com/). Если хотите, я могу создать простой пример позже. – Igor

ответ

9

Я взбил minimal proof-of-concept demo. Он написан как правильный плагин перехода цикла jQuery.

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

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

Кроме того, он может быть оптимизирован. На этом этапе сначала написано для ясности, второе - исполнение. Однако на моей (довольно быстрой) машине время анимации и реакции свободно и мгновенно.

Итак, у вас оно есть.

Редактировать: demo page теперь включает в себя документацию для дополнительных экспонатов и несколько примеров, демонстрирующих, как добиться различных эффектов, просто передав разные варианты.

Редактировать 2: Я обобщил полосы на плитки и поставил еще много примеров на demo page.

+1

это хорошо! ты знаешь, как я могу угаснуть полосы? Я попробовал добавить непрозрачность: 0 для анимации, но это не работает. – Alex

+0

@ Александра: Хамм, это было бы моим первым подходом. Завтра я, возможно, займусь этим. Прямо сейчас, я должен развлечь некоторых гостей на день рождения. ;) Я едва закончил демо вовремя и избегал хмуриться. ПРОЯВЛЯЕТ Я! : p – Thomas

+1

Благодарю вас, я желаю вам счастливого дня рождения: P – Alex