jQuery动画滑动背景图像使用鼠标位置不会停止...一直往前走
jQuery动画滑动背景图像使用鼠标位置不会停止...一直往前走
提问于 2012-09-28 11:35:40
我有一个整洁的小jQuery脚本，我正在处理。
目标:隐藏溢出的父div包含一个更大的带有image的div。当我将鼠标移动到父div的左侧或右侧时，带有图像的div会将“左边缘”更改为向左或向右移动。
问题是。如果我将鼠标移出父div (向左或向右)，图像将继续移动。当鼠标不在父div的内、左或右边缘时，我需要图像停止。
有什么想法吗？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict ();
jQuery(document).ready(function(){
jQuery('#container').mousemove(function(e){
var parentWidth = jQuery('#container').width();
var parentWidthLeft = Math.round(.1 * jQuery('#container').width());
var parentWidthRight = Math.round(jQuery('#container').width() - parentWidthLeft);
var parentHeight = jQuery('#container').height();
var parentOffset = jQuery('#container').offset();
var X = Math.round(e.pageX - parentOffset.left);
var Y = Math.round(e.pageY - parentOffset.top);
if (X<parentWidthLeft)
{
jQuery('#image').animate({'left': '-' + parentWidth }, 5000);
}
if (X>parentWidthRight)
{
jQuery('#image').animate({'left': parentWidth }, 5000);
}
if (X<=parentWidthRight && X>=parentWidthLeft)
{
jQuery('#image').stop();
}
if (X<1)
{
jQuery('#image').stop();
}
});
jQuery('#container').mouseleave(function(){
jQuery('#image').stop();
});
});
// ]]>
</script>
</head>
<body>
<div id="container" style="width: 500px; height: 500px; overflow: hidden; border: 10px solid #000; position: relative; margin: auto auto;">
<div id="image" style="position: absolute; left: 0; top: 0;"><img src="http://dump4free.com/imgdump/1/Carmen-Electra_1wallpaper1024x768.jpg" alt="" /></div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-28 11:54:49
jQuery的stop()函数可以有一个名为"clearQueue“的布尔参数。如果您尝试使用.stop(true)而不是.stop()，动画将正确停止，您的页面将正常运行。
事实是，当你移动鼠标时，会触发很多事件，触发很多动画。
其中一个当前正在运行，所有其他的都存储在队列中，并在稍后执行(在第一个动画完成后)。
这样，框架就有了按时间顺序排列的事件列表的“记忆”。
通过使用stop(true)，您可以命令完全刷新动画队列。
Stack Overflow用户
发布于 2012-09-28 12:09:24
尝试使用 jQuery .unbind()
jQuery('#container').mouseleave(function(){
jQuery('this').unbind('mousemove');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12633263
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号