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/

编辑：

淡出部分虽然有点棘手：

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

你也可以尝试将一个点击处理程序绑定到每个＆lt; a＆gt;页面上的标记，在重定向之前触发反向淡出动画。但是，它会变得混乱。

粗略且未经检验的建议：

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

如何在页面加载时淡入div并在离开时淡出它们

1 个答案: