Последовательная анимация нескольких элементов
Вложений: 1
Есть маленькая проблемка, код на картинке не хочет работать, а вот этот работает:
$(function(){ var ftime = 10000; $('.se').each(function(){ $(this).delay(ftime).animate({opacity:0}, 1500); ftime += 100; }); $('.planka div').each(function(){ $(this).delay(ftime).animate({opacity:0, width:0, left:"50px"}, 1500); ftime += 100; }); }); это слайдер, с эфектом... рамки, одна за другой складываются, но хочу вынести некоторые эффекты в отдельные пользовательские функции, что не так делаю...??? по коду на картинке выходит ошибка в гугл хроме:Reference error и консоль при этом не работает... Долго не программил, так что не ругайте сильно :) |
странный код на картинке у вас. он и не будет работать, потому что window.ftime не определена. ( нет объявления переменной, а она используется)
мне кажется, что будет получше так $(function(){ var ftime = 10000; $('.se, .planka div').each(function(){ var a = $(this).hasClass("se") ? { opacity:0 } : {opacity:0, width:0, left:"50px"}; // --- это можно было сделать в 2 строки. // | $(this).delay(ftime += 100).animate( a, 1500); }); }); ну или так. это уже понятней будет $(function() { var ftime = 10000; $('.se, .planka div').each(function(i, el) { el = $(el); el.delay(ftime); if (el.hasClass(".se")) { el.animate({ opacity: 0 }, 1500); } else { el.animate({ opacity: 0, width: 0, left: "50px" }, 1500); } ftime += 100; }); }); |
Код не странный, я хочу сделать SeGlader двухрежимной, сначала она скрывает, а потом ворачивает всё обратно, это часть эффекта, мне надо её отдельно сделать...
|
напишите плагин
(function($) { $.fn.somePlugin = function(options) { }; })(jQuery); |
:) как вариант, но мне кажется с этим ещё больше проблем нагребу... значит jquery и пользовательские функции ни как не подружить???:blink:
|
подружить. но легче через плагин.
|
Попробую тогда плагин слепить с эффектами...
|
Вот что намутил
jQuery.fn.JBox = function(options) { var opt = jQuery.extend({ effects: {opacity:0}, sdelay: 5000, fdelay: 100, speed: 2000 }, options), ftime = opt.sdelay; this.each(function(){ $(this).delay(ftime).animate(opt.effects, opt.speed); ftime += opt.fdelay; }); } $(function(){ $('.se').JBox(); $('.planka div').JBox({effects: {opacity:0, width:0, left:"50px"},sdelay:7000}); });Обратный эффект так же работает, просто меняешь настройку effects |
у меня такая же проблема возникла, но решить её по-нормальному надо было неделю назад
задача : последовательно показать 4 элемента первый способ <p>ololo</p><p>ololo</p><p>ololo</p><p>ololo</p> <script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script> <script> var els = $("p").hide(), i=0; (function loop(){ els.eq( i++ ).slideDown(800, loop) })(); </script> второй способ через deferred. но я не могу никак осилить это нововведение. |
Цитата:
|
Часовой пояс GMT +3, время: 18:44. |