各位向你们请教一个问题,想必学过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>
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>
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();
});
理论上是应该可以了
$(function(){
var $timeOut_div=$("#timeout_div");
$("#timeOut_btn").hover(
function(){
$timeOut_div.fadeIn("slow");
},function(){
$timeOut_div.fadeOut("slow");
}
);
});
</script>
$timeOut_div.stop();
鼠标快速移入移出button对象时,会执行上面这行代码,但是当前的fadein/fadeout动画还没有扫行完就被中止了。
可以这样写:
$timeOut_div.stop(false,true);
给stop方法加上参数就可以了
可以参考以下网址:
http://www.w3school.com.cn/jquery/effect_stop.asp