JQuery исчезает несколько Div с разными таймингами - PullRequest
Новая
       19

JQuery исчезает несколько Div с разными таймингами

0 голосов
/ 19 ноября 2010

конвертирую флеш анимацию в jquery #

У меня в основном загружены элементы div разных цветов, я хочу, чтобы элементы div появлялись и исчезали, каждый элемент div имеет разную синхронизацию в зависимости от последовательности Фибоначчи,

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

вот мой текущий код, но он дает сбой Firefox, вероятно, из-за того, что у меня так много setintervals, может кто-нибудь указать мне правильное направление, пожалуйста? 

var myDiv ='#bannerHolder'
    var fib_str = '1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13'
    var widths_str = '33px, 31px, 35px, 9px, 16px, 50px, 33px, 24px, 40px, 20px, 63px, 30px, 10px, 29px, 11px, 12px, 51px, 31px, 35px, 11px, 14px, 50px, 30px, 25px, 38px, 20px, 35px'
    var pos_str = '0px, 44px, 105px, 144px, 153px, 203px, 236px, 269px, 280px, 354px, 374px, 437px, 447px, 457px, 506px, 517px, 529px, 604px, 646px, 687px, 698px, 712px, 762px, 787px, 823px, 895px, 915px'
    var color_str = '#D5E1D7, #18D4C9,#BF51C3,#1E82C9, #EDEDED, #E1C981, #C9A94F, #BDBCAA, #5DB522, #EB2F34, #823133, #004BD8, #A6A0A0, #DS9F36, #FFDB00, #69944F, #18D4C9, #BF51C3, #1E82C9, #6B949A, #FFDB00, #819E64, #BDBCAA, #54BA43, #EB2F34, #823133'
    var width = widths_str.split(",");
    var pos = pos_str.split(",");
    var color = color_str.split(",");
    var fib = fib_str.split(",");
    console.log(width);
    console.log(pos);
    console.log(color);
    var counter = width.length
    var stopper = false;
          for(i=0;i<counter;i++){
        var html = '<div id ="stripe'+i+'"/>'   
        $(myDiv).append(html)
        $('#stripe'+i).css({  'top': 0,  'left': pos[i],'position': 'absolute', 'float': 'left', 'background-color' : color[i]})
        $('#stripe'+i).attr({'height': 100, 'width': width[i], 'min-width' : width[i], 'min-height' : '100px'  })
        $('#stripe'+i).width(width[i])
        $('#stripe'+i).height('100px')
        var myfibtime = (fib[i] * 200);
        setInterval(stripeFadeOut(i), myfibtime );
                setInterval(stripeFadeIn(i), myfibtime );
    };
    function stripeFadeOut(id){
        $('#stripe'+id).fadeOut('slow');
        var myfibtime = (fib[id] * 200);
    }
    function stripeFadeIn(id){
        $('#stripe'+id).fadeIn('slow');
        var myfibtime = (fib[id] * 200);
    }

})

если я использую setInterval('stripeFadeIn(' + id + ')', myfibtime+'; я получаю, что stripeFadeIn не определено, если я пытаюсь использовать .animate, как предложено Мэтью, я получаю слишком много рекурсии

Ответы [ 2 ]

2 голосов
/ 19 ноября 2010

Я бы порекомендовал просмотреть анимации jQuery http://api.jquery.com/animate/ и настроить обратный вызов для выполнения обратного затухания.

В их примере используется прозрачность для анимации, так что, возможно, это даст вам желаемый эффект.

1 голос
/ 19 ноября 2010

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

Вместо этого вы можете сделать одну вещь в самом цикле, создать два интервала, т.е. один для fadeOut и один для fadeIn. Вместо «медленно» используйте несколько миллисекунд на ваш выбор.

Тогда ваш fadeOut должен вызываться при каждом myfibtime + animatingMilliseconds = fadeOutInterval. И ваш fadeIn должен вызываться каждые fadeOutInterval + animatingMilliseconds.

Я надеюсь, что это поможет вам

Мое предложение полностью относится к вашему старому коду. Так и делай так 

for(i=0;i<counter;i++){
        var html = '<div id ="stripe'+i+'"/>'   
        $(myDiv).append(html)
        $('#stripe'+i).css({  'top': 0,  'left': pos[i],'position': 'absolute', 'float': 'left', 'background-color' : color[i]})
        $('#stripe'+i).attr({'height': 100, 'width': width[i], 'min-width' : width[i], 'min-height' : '100px'  })
        $('#stripe'+i).width(width[i])
        $('#stripe'+i).height('100px')
        var myfibtime = (fib[i] * 200);
        var animTime = 1500;
        var fadeOutInterval = myfibtime + animTime;
        var fadeInInterval = fadeOutInterval  + animTime;
        setInterval(stripeFadeOut(i), fadeOutInterval );
        setInterval(stripeFadeIn(i), fadeInInterval );
    };
    function stripeFadeOut(id){
        $('#stripe'+id).fadeOut(1500);            
    }
    function stripeFadeIn(id){
        $('#stripe'+id).fadeIn(1500);
    }
...