Последовательная анимация нескольких элементов

[sysya]

Есть маленькая проблемка, код на картинке не хочет работать, а вот этот работает:

$(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 и консоль при этом не работает...

Долго не программил, так что не ругайте сильно

[melky]

странный код на картинке у вас. он и не будет работать, потому что 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;
    });
});

[sysya]

Код не странный, я хочу сделать SeGlader двухрежимной, сначала она скрывает, а потом ворачивает всё обратно, это часть эффекта, мне надо её отдельно сделать...

[melky]

напишите плагин

(function($) {
    $.fn.somePlugin = function(options) {

    };	
})(jQuery);

[sysya]

как вариант, но мне кажется с этим ещё больше проблем нагребу... значит jquery и пользовательские функции ни как не подружить???

[melky]

подружить. но легче через плагин.

[sysya]

Попробую тогда плагин слепить с эффектами...

[sysya]

Вот что намутил

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

[melky]

у меня такая же проблема возникла, но решить её по-нормальному надо было неделю назад

задача : последовательно показать 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. но я не могу никак осилить это нововведение.

[azza147]

<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>

Спасибо, оч. полезный код.