/index.html

## index.html
<!doctype html>
    <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en-US"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en-US"> <![endif]-->
    <!--[if gt IE 9]><!--><html class="no-js" lang="en-US"><!--<![endif]-->
    <head>
        <title>iOS 6 jQuery Animate Failure</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <style type="text/css">
            .pagewrap { width:940px; margin:0 auto;}

            #swipebox {
                width:100%; height:300px;
                position:relative;
                overflow:hidden;

            }
            #swipebox img {
                position:absolute;
                top:0; left:0;
            }
            .fillerbox {
                padding:200px 100px;
                font-size:28px;
                color:#fff;
                background-color:blue;
                text-align:center;
                font-family:sans-serif;
                margin:0 auto;
            }
            .fillerbox ul {
                text-align:left;
            }
        </style>
    </head>
    <body>
        <div class="pagewrap">
            <div class="fillerbox">
                In iOS6 Mobile Safari
                <ul>
                    <li>Swipe picture below left/right and notice how it animates back to the left edge</li>
                    <li>Touch the picture and scroll the page up/down</li>
                    <li>Repeat left/right swipe and notice the picture does NOT animate back to the left edge</li>
                    <li>It appears jQuery animate fails after touchmove occurs without e.preventDefault</li>
                </ul>
            </div>
            <div id="swipebox">
                <img src="http://i.imgur.com/ktKLI.jpg" alt="" />
            </div>

            <div class="fillerbox">This box is only here to make the page large enough to scroll</div>
        </div><!-- .pagewrap -->

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
jQuery(document).ready(function() {

    /* The goal of this code is to create a horizontal javascript scrollable image in #swipebox
     * In addition to the horizontal javascript controlled scrolling
     * If the user wants to scroll the page vertically by clicking on the image and
     * dragging up/down, I want this behavior to pass through
     * For example, on a small screen the image may take up the entire area and strand
     * the user on that part of the page
     */

    var el = document.getElementById("swipebox"),
        $slider = $('#swipebox').find('img'),
        startX, startY, dx, dy,
        startLeft,
        animateH = false,
        animateV = false;

    var onTouchStart = function(e) {
        startLeft = parseInt($slider.css('left'), 10) || 0;
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;

    };
    var onTouchMove = function(e) {
        dx = e.touches[0].pageX - startX;
        dy = e.touches[0].pageY - startY;

        if (
            animateH ||
            (!animateV && Math.abs(dx) > 5)
        ) {
            // prevent default, we are scrolling horizontally,
            animateH = true;
            $slider.stop().css({'left': startLeft+dx*2});
            e.preventDefault();
        } else if (Math.abs(dy) > 5) {
            // do NOT prevent default, we are scrolling the page vertically
            animateV = true;
        } else {
            // direction of scroll is undetermined at this time
            // we've moved less than 5px in any direction
            e.preventDefault();
        }
        return false;
    };
    var onTouchEnd = function(e) {
        $slider.stop().animate({'left': 0}); // animate image back to left
        e.preventDefault();
        animateH = false;
        animateV = false;
    };

    var onTouchCancel = function(e) {
        console.log('onTouchCancel');
    };

    el.addEventListener('touchstart', onTouchStart, false);
    el.addEventListener('touchmove', onTouchMove, false);
    el.addEventListener('touchend', onTouchEnd, false);
    el.addEventListener("touchcancel", onTouchCancel, false);
});

        </script>
    </body>
</html>
	<!doctype html>
	<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en-US"> <![endif]-->
	<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en-US"> <![endif]-->
	<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en-US"> <![endif]-->
	<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en-US"> <![endif]-->
	<!--[if gt IE 9]><!--><html class="no-js" lang="en-US"><!--<![endif]-->
	<head>
	<title>iOS 6 jQuery Animate Failure</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<style type="text/css">
	.pagewrap { width:940px; margin:0 auto;}

	#swipebox {
	width:100%; height:300px;
	position:relative;
	overflow:hidden;

	}
	#swipebox img {
	position:absolute;
	top:0; left:0;
	}
	.fillerbox {
	padding:200px 100px;
	font-size:28px;
	color:#fff;
	background-color:blue;
	text-align:center;
	font-family:sans-serif;
	margin:0 auto;
	}
	.fillerbox ul {
	text-align:left;
	}
	</style>
	</head>
	<body>
	<div class="pagewrap">
	<div class="fillerbox">
	In iOS6 Mobile Safari
	<ul>
	<li>Swipe picture below left/right and notice how it animates back to the left edge</li>
	<li>Touch the picture and scroll the page up/down</li>
	<li>Repeat left/right swipe and notice the picture does NOT animate back to the left edge</li>
	<li>It appears jQuery animate fails after touchmove occurs without e.preventDefault</li>
	</ul>
	</div>
	<div id="swipebox">
	<img src="http://i.imgur.com/ktKLI.jpg" alt="" />
	</div>

	<div class="fillerbox">This box is only here to make the page large enough to scroll</div>
	</div><!-- .pagewrap -->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function() {

	/* The goal of this code is to create a horizontal javascript scrollable image in #swipebox
	* In addition to the horizontal javascript controlled scrolling
	* If the user wants to scroll the page vertically by clicking on the image and
	* dragging up/down, I want this behavior to pass through
	* For example, on a small screen the image may take up the entire area and strand
	* the user on that part of the page
	*/

	var el = document.getElementById("swipebox"),
	$slider = $('#swipebox').find('img'),
	startX, startY, dx, dy,
	startLeft,
	animateH = false,
	animateV = false;

	var onTouchStart = function(e) {
	startLeft = parseInt($slider.css('left'), 10) \|\| 0;
	startX = e.touches[0].pageX;
	startY = e.touches[0].pageY;

	};
	var onTouchMove = function(e) {
	dx = e.touches[0].pageX - startX;
	dy = e.touches[0].pageY - startY;

	if (
	animateH \|\|
	(!animateV && Math.abs(dx) > 5)
	) {
	// prevent default, we are scrolling horizontally,
	animateH = true;
	$slider.stop().css({'left': startLeft+dx*2});
	e.preventDefault();
	} else if (Math.abs(dy) > 5) {
	// do NOT prevent default, we are scrolling the page vertically
	animateV = true;
	} else {
	// direction of scroll is undetermined at this time
	// we've moved less than 5px in any direction
	e.preventDefault();
	}
	return false;
	};
	var onTouchEnd = function(e) {
	$slider.stop().animate({'left': 0}); // animate image back to left
	e.preventDefault();
	animateH = false;
	animateV = false;
	};

	var onTouchCancel = function(e) {
	console.log('onTouchCancel');
	};

	el.addEventListener('touchstart', onTouchStart, false);
	el.addEventListener('touchmove', onTouchMove, false);
	el.addEventListener('touchend', onTouchEnd, false);
	el.addEventListener("touchcancel", onTouchCancel, false);
	});

	</script>
	</body>
	</html>