постепенно исчезать и исчезать с помощью jquery - PullRequest
Новая
       23

постепенно исчезать и исчезать с помощью jquery

2 голосов
/ 14 апреля 2011

Недавно меня попросили сделать этот эффект

http://mobile.bebitalia.com/home.do

, но он сделан с помощью scriptaculus, и мне нужно как-то добиться этого с помощью jquery.

я нашелэтот пример, но он на полпути

http://jsfiddle.net/5rkEw/

Можете ли вы помочь мне сделать эффект затухания после завершения затухания?

Ответы [ 2 ]

3 голосов
/ 14 апреля 2011

Я собираюсь собрать скрипку, но вы можете попробовать это, используя похожую разметку в качестве примера, который вы привели 

// Translated from scriptaculus
// http://mobile.bebitalia.com/home.do

function hideCube() {
$('#gctu1w_bg').show('slow');
$('.cube').each(function(index, element) {
    var sleepTime = Math.floor(Math.random() * 2000);
    var t = setTimeout(function() {
        var d = Math.floor(Math.random() * 2000);
        $(element).fadeTo(d, 0);
    }, sleepTime);
});
}

$(function() {

$('.cube').each(function(index, element) {
    var sleepTime = Math.floor(Math.random() * 2000);
    var t = setTimeout(function() {
        var d = Math.floor(Math.random() * 1000);
        $(element).fadeTo(d, 0.99);
    }, sleepTime);
});

var h = setTimeout(hideCube, 4000);

});

http://jsfiddle.net/nickywaites/GBhMw/

1 голос
/ 14 апреля 2011

вот хорошее решение: 

fadeInout = {
    init: function() {
        v = $("#blocks > li").css('visibility', 'hidden'),
        cur = 0,
        rem = 0;
        for (var j, x, i = v.length; i; 
             j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
        //other startup code
        return this;
    },

    fades: function() {
        this.fadein();
    },
    fadein: function() {
        v.eq(cur++).css('visibility', 'visible').hide().fadeIn();
        if (cur != v.length) setTimeout(fadeInout.fadein, 50);
        else setTimeout(fadeInout.fadeout, 100);
    },
    fadeout: function() {
        v.eq(rem++).css('visibility', 'none').fadeOut().show();
        if (rem != v.length) setTimeout(fadeInout.fadeout, 50);
    }

}

fadeInout.init().fades();

и вот скрипка, которая показывает это: http://jsfiddle.net/maniator/rcts4/

...