jquery - 如何在页面加载时淡入 div 并在离开时淡出相反的内容

Question

我在一页上有 4 个 div，我需要它们以顺时针方式一个接一个地淡入，所以不是一次全部淡入。我还需要它们以与用户离开页面时淡入相反的方式再次淡出，但是它们需要在页面重定向之前全部淡出

Answer 1

至于“淡入”部分:

$(document).ready(function(){
    $('#div1, #div2, #div3, #div4').animate({'opacity' : 0}, 0);
   fadeInDivs(['#div1', '#div2', '#div4', '#div3']);
});

function fadeInDivs(els) {
    e = els.pop();
    $(e).animate({'opacity' : 1}, 500, function(){
        if (els.length) fadeInDivs(els);
    })
}

http://jsfiddle.net/eks5L/5/

编辑:

淡出部分有点棘手:

您可以绑定(bind)到unload Event ，但很可能您的动画不会在浏览器重定向之前完成，因为无法阻止或推迟卸载。

您还可以尝试将点击处理程序绑定(bind)()到页面上的每个 标记，在重定向之前触发反向淡出动画。但它会变得困惑。

粗略且未经测试的建议:

$('a:not(".already-clicked")').live('click', function(e){
    e.preventDefault();
    $(this).addClass('already-clicked');
    callback = function(){$('a.already-clicked').click()};
    triggerFadeOutAnimation(callback);
});