Question

我见过load()和ready()的示例，但它们似乎总是适用于窗口或文档正文，或div或img或类似的东西。

我有一个hover()功能，当您将鼠标悬停在它上面时，它会使用fadeIn()来显示它。问题是，div中的图像还没有加载，所以它最终只是出现了。我需要的代码只允许图像在内容完全加载时淡出。当我插入其他选择器时，如下所示，它不起作用

$(this).next(".menuPopup").ready(function () { //or load(), neither work
  fadeTo(300, 1);
});

编辑：相关代码

     $( '.leftMenuProductButton' ).hover (
            function () {

                                $(this).next(".menuPopup").stop().css("opacity", 1).fadeIn('slow');


            },
            function () {



                $(this).next(".menuPopup").stop().hide();


    });

HTML

<div class="leftMenuProductButton"> Product 1</div>
                                <div id="raceramps56" class="menuPopup"><IMG SRC="myimage.jpeg"> </div>

Answer 1

你应该把动画链接起来：

$(this).next(".menuPopup").fadeIn(300, function() {
    $(this).children('.inside_image').css(
        'opacity':'0',
        'display':'show'
    );
    $(this).children('.inside_image').animate({
        opacity: '1'
    }, 300);
});

之前我做过类似的事情，而且效果很好。我想很多Lightbox都会这样做。

Answer 2

功能

$(window).load()

可能就是你要找的东西。

请参阅：SO post

Answer 3

您可以使用window.onLoad，在加载所有内容之前不会触发。

如何在Jquery中准备好后才淡化内容？

3 个答案: