jQuery animate slidding background image using mouse position wont stop... just keeps going
Posted
by
simian
on Stack Overflow
See other posts from Stack Overflow
or by simian
Published on 2012-09-28T03:35:39Z
Indexed on
2012/09/28
3:37 UTC
Read the original article
Hit count: 140
I have a neat little jQuery script I am working on.
Goal: parent div with overflow hidden holds a larger div with image. When I move the mouse to the left or right of the parent div, the div with image changes margin-left to move left or right. Problem is... if I move the mouse out of the parent div (left or right), the image keeps going. I need the image to stop when the mouse is not on the inside left or right edge of the parent div. Any ideas?
<!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>
© Stack Overflow or respective owner
