Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Последовательная анимация нескольких элементов (https://javascript.ru/forum/jquery/21504-posledovatelnaya-animaciya-neskolkikh-ehlementov.html)

sysya 12.09.2011 21:47

Последовательная анимация нескольких элементов
 
Вложений: 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 и консоль при этом не работает...

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

melky 12.09.2011 22:16

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

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

melky 12.09.2011 22:33

напишите плагин
(function($) {
    $.fn.somePlugin = function(options) {

    };	
})(jQuery);

sysya 12.09.2011 22:38

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

melky 12.09.2011 22:38

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

sysya 12.09.2011 22:45

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

sysya 13.09.2011 18:21

Вот что намутил
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 17.09.2011 23:45

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

задача : последовательно показать 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 02.03.2012 14:51

Цитата:

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

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