4

我试图让一个大徽标（在我网站的标题中）在加载时落入标题区域。所以这是我能找到的唯一符合这个想法的 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');
});

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

谢谢你。

4

1 回答 1

2

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

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

于 2012-11-07T14:47:40.767 回答