jQuery div 跌落效果 onload

Question

我试图让一个大徽标（在我网站的标题中）在加载时落入标题区域。所以这是我能找到的唯一符合这个想法的 jquery 函数。

http://jsfiddle.net/apHLu/279/

var $dropDiv = $('#dropDiv');
   $('#holder a').on('click', function() {
    // get position of the element we clicked on
    var offset = $(this).offset();

    // get width/height of click element
    var h = $(this).outerHeight();
    var w = $(this).outerWidth();

    // get width/height of drop element
    var dh = $dropDiv.outerHeight();
    var dw = $dropDiv.outerWidth();

    // determine middle position
    var initLeft = offset.left + ((w/2) - (dw/2));

    // animate drop
    $dropDiv.css({
            left: initLeft,
            top: $(window).scrollTop() - dh,
            opacity: 0,
            display: 'block'
        }).animate({
            left: initLeft,
            top: offset.top - dh,
            opacity: 1
        }, 300, 'easeOutBounce');
});

我基本上想知道，是否可以将点击触发器切换为加载调用？如果不可能的话，我不想糊里糊涂地试图让它工作。

谢谢。

Answer 1

这是updated Fiddle。 $(function() { ... }); 是“文档准备就绪”的缩写。我还在setTimeout(); 中封装了这个函数，因为它的触发速度有点快，可以看到完整的效果。更改setTimeout中的第二个参数来调整它等待触发的时间...

更新（根据@coby 的建议）：如果您确实有大量图片，您可以将$(function() { 更改为window.onload(function() {。 Ready 不会等待所有图像完全加载。