jquery - setTimeout，使用 jQuery 显示和隐藏

Question

我有一个大的我想显示 onload 然后让它超时以显示较小的图像。然后在鼠标悬停时，使用 jQuery 在大图像中滑动，在鼠标上滑出大图像并滑入小图像。这是我的代码，我只有 mouseover、mouseout 功能。我需要它从显示 5 秒的大屏幕开始，然后滑入较小的屏幕。：

<script type="text/javascript">   
    $(document).ready(function () {
        $(".expanded").show();
        $(".collapsed").hide();


        $(".collapsed").mouseover(function () {
            $(".collapsed").slideUp(500);
            $(this).next(".expanded").slideToggle(500);
        });

        $(".expanded").mouseleave(function () {
            $(".expanded").slideUp(500);
            $(".collapsed").slideDown(500);      
        });  
    });
</script>

Answer 1

尝试这个：

$(document).ready(function () {
    setTimeout(function(){
        toggleImage($(".expanded"));
    },5000);

    $(".collapsed").hide();

    //toggle the componenet with class msg_body
    $(".collapsed").mouseover(function () {
        toggleImage($(".collapsed"));
    });

    $(".expanded").mouseleave(function () {
        toggleImage($(".expanded"));
    });


});

function toggleImage(img) {
    $(img).slideUp(500, function() {
        $(this).siblings("img").slideToggle(500);
    });

    return;
}

Answer 2

我将创建一个全局变量“readyforHovering”，在超时到期之前将其设置为 false，例如：

var readyforHovering = false;



$(document).ready(function () {

setTimeout(function() {
  //Code to hide the large image and show the smaller image goes here

  //Now enable hovering...
  readyforHovering = true;
}, 5000);

        $(".expanded").show();
        $(".collapsed").hide();
        //toggle the componenet with class msg_body
        $(".collapsed").mouseover(function () {
            if (readyforHovering) {
               $(".collapsed").slideUp(500);
               $(this).next(".expanded").slideToggle(500);
            }
        });

        $(".expanded").mouseleave(function () {
            if (readyforHovering) {
               $(".expanded").slideUp(500);
               $(".collapsed").slideDown(500);
            }

               });

    });

您不希望用户在 5 秒过后才能悬停，并且您已经显示了较小的图像......这就是 readyforHovering 变量的重点。