如何在 Jquery 中准备好内容后才使其淡出？

发布于 2024-08-25 16:52:00 字数 939 浏览 12 评论 0原文

我看过 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>

原文

I've seen examples for load() and ready(), but they always seem to apply to the window or document body, or a div or img or something like that.

I have a hover() function, and when you hover over it, it uses fadeIn() to reveal it. Problem is, the images inside the div aren't loaded yet, so it ends up just appearing anyway. I need code that will only allow the image to fade when it's contents are fully loaded. When I just plug in other selectors like the following, it doesn't work

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

EDIT: Relevant code

     $( '.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

就像说晚安 2024-09-01 16:52:00

您可能应该链接动画：

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

我以前做过类似的事情，而且效果很好。我认为很多灯箱都这样做。

You should probably go with chaining the animations:

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

I've done something like this before, and it worked pretty well. I think a lot of Lightboxes do this.

回复收藏 0 原文