各位向你们请教一个问题,想必学过JQUERYR朋友也碰到过,问题是这样的:
jsp页面中有一个button和一个div,当鼠标进入button时,div显示,划出button区域,div消失,显示和消失分别调用的是jquery提供的fadein()和fadeout()方法,如果规规距距划入划出,道是没有问题,现在问题是当鼠标在button区域快速晃
动后,等鼠标再一次进入button时,什么效果都没有了?请问各位有识之士帮我一忙,看看该怎么解决?
代码如下:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript">
            $(function(){
                 var $timeOut_div=$("#timeout_div");
                $("#timeOut_btn").hover(function(){
                    $timeOut_div.stop();
                    $timeOut_div.fadeIn("slow");
                },function(){
                    $timeOut_div.stop();
                    $timeOut_div.fadeOut("slow");
                });
            });
        </script>
    </head>
    <body>
        <div style="position:relative"><input type="button" value="按钮"  id="timeOut_btn"></div>
        <div id="timeout_div" style="border:1px solid red;display:none;position:absolute">哈哈</div>
    </body>
</html>

解决方案 »

  1.   

    楼主可能是你的操作台快了,事件还没有发生就销毁了,建议你在事件后加一个.end的函数之后再加载别的就可以了$(function(){
    var $timeOut_div=$("#timeout_div");
    $("#timeOut_btn").hover(function(){
    $timeOut_div.stop();
    $timeOut_div.fadeIn("slow").end();
    },function(){
    $timeOut_div.stop();
    $timeOut_div.fadeOut("slow").end();
    });
    理论上是应该可以了
      

  2.   

    <script type="text/javascript">
    $(function(){
        var $timeOut_div=$("#timeout_div");
        $("#timeOut_btn").hover(
            function(){
                $timeOut_div.fadeIn("slow");
            },function(){
                $timeOut_div.fadeOut("slow");
            }
        );
    });
    </script>
      

  3.   

    问题出在这里:
    $timeOut_div.stop();
    鼠标快速移入移出button对象时,会执行上面这行代码,但是当前的fadein/fadeout动画还没有扫行完就被中止了。
    可以这样写:
    $timeOut_div.stop(false,true);
    给stop方法加上参数就可以了
    可以参考以下网址:
    http://www.w3school.com.cn/jquery/effect_stop.asp