Question

我有一个很大的我想显示onload然后让它超时显示较小的图像。然后onmouseover，在大图像中使用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

我会创建一个全局变量“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变量的点。

Answer 2

试试这个：

$(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;
}

setTimeout，使用jQuery显示和隐藏

2 个答案: