Bug Tracker

#10522 closed bug (invalid)

Opened October 18, 2011 04:52PM UTC

Closed November 03, 2011 08:11AM UTC

animate() in IE7-8 function after complete called twice

Reported by: vasis123@gmail.com Owned by: vasis123@gmail.com
Priority: low Milestone: None
Component: effects Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

This is my code reduced.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
	$(function() {
		var $bg_image   = $('#bf_background').children('img'), //(1)
			animSpeed   = 700,
			animated    = false,
			current     = 0,
		navigate = function(dir) {
			if(animated) return false;
			animated = true;
			total_items = $('.bf_gallery_item').length;
			(dir) ? ++current : --current;
			if(current > total_items - 1)
				current = 0;
			else if(current < 0)
				current = total_items - 1;
			var $next_item = $('.bf_gallery_item').eq(current);
			animateBGImage(dir, $next_item);
		},
		animateBGImage = function(dir, $next_item) {
			var $next_item_bgimage = $('<img src="' + $next_item.children('img').data('bgimg') + '" alt="image' + (current + 1) + '" ></img>'),
				starting_left = (dir) ? $(window).width() : -$(window).width();
			//(2)
			$next_item_bgimage.css({
				width	: '100%',
				height	: '100%',
				left	: starting_left,
				top		: '0'
			}).insertAfter($bg_image).stop().animate({
				left	: '0px'
			}, animSpeed);
			var ending_left	= (dir) ? -$bg_image.width() : $(window).width();
			$bg_image.stop().animate({
				left	: ending_left + 'px'
			}, animSpeed, function() {	//(3)
				$(this).remove();
				$bg_image 	= $next_item_bgimage;
				animated 	= false;
			});
		};
		$('#bf_prev').bind('click', function(e) {
			navigate(0);
			return false;
		});
		$('#bf_next').bind('click', function(e) {
			navigate(1);
			return false;
		});
	});
</script>
<style>
	.bf_nav a{
		width:72px;
		height:140px;
		position:fixed;
		top:50%;
		margin-top:-70px;
		cursor:pointer;
		z-index:999;
		background:#000;
	}
	.bf_nav a.bf_next{
		right:0;
	}
	.bf_nav a.bf_prev{
		left:0;
	}
	.bf_background img{
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
	}
	.bf_gallery_item {
		display:none;
	}
</style>
</head>
<body>
	<div id="bf_background" class="bf_background">
		<img src="images/background/default.jpg" alt="image1"/>
	</div>
	<div id="bf_gallery" class="bf_gallery">
		<div class="bf_nav">
			<a id="bf_prev" href="#" class="bf_prev"></a>
			<a id="bf_next" href="#" class="bf_next"></a>
		</div>
		<div class="bf_gallery_item">
			<img src="images/foreground/1.jpg" alt="image1" data-bgimg="images/background/1.jpg" />
		</div>
		<div class="bf_gallery_item">
			<img src="images/foreground/2.jpg" alt="image1" data-bgimg="images/background/2.jpg" />
		</div>
		<div class="bf_gallery_item">
			<img src="images/foreground/3.jpg" alt="image1" data-bgimg="images/background/3.jpg" />
		</div>
	</div>
</body>
</html>

This code changes the background image, but in IE7-8 (and possibly 6) function is invoked after the animation and marked as "//(3)" is called twice. This leads to the fact that after the second slide transitions in the block "bf_background" placed the following code: 


<img style="left: 0px; top: 0px; width: 100%; height: 100%;" alt="image3" src="images/background/3.jpg"/>
</img style="left: 0px; top: 0px; width: 100%; height: 100%;"/>
<img style="left: 0px; top: 0px; width: 100%; height: 100%;" alt="image3" src="images/background/3.jpg"/>
</img style="left: 0px; top: 0px; width: 100%; height: 100%;"/>

and the code becomes non-functional. But if the line marked "(1)" move into function "animateBGImage", at the place is marked as "(2)" everything is working well.

Attachments (0)
Change History (2)

Changed October 19, 2011 10:58AM UTC by addyosmani comment:1

component: unfiled → effects
owner: → vasis123@gmail.com
priority: undecided → low
status: new → pending

Is there any way you could clean up the code supplied into a test case on jsFiddle.net?

Changed November 03, 2011 08:11AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!