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