Solved

jQuery animate callback problem

Posted on 2012-12-28

2 solutions

352 Views

Last Modified: 2012-12-28

I'm getting an error attempting to change a CSS value on an animate callback. Sorry, I'm a bit new at this. The animate works, but where I insert $('#slide'+prevImage).css('left', '864px') after a comma, I get an error. Is there something wrong with my syntax? Thank you!

My test page:
http://www.dis-hfm.com/default.htm

My Javascript:

$(function(){
	var prevImage=1;
	var nextImage=1;
	var maxImage=5;
	var intervalID=setInterval(slideAnimation,1000);

	function slideAnimation(){
		prevImage=nextImage;
		if (nextImage==maxImage){nextImage=1;} else {nextImage++;}
		$('#slide'+nextImage).animate({left:'-=864px'},{
			$('#slide'+prevImage).css('left', '864px')
		});
	};
});

Open in new window

Comment

Question by:bbdesign

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

3 Comments

LVL 75

Accepted Solution

by:käµfm³d 👽

käµfm³d 👽 earned 250 total points

ID: 387269762012-12-28

Try:

...
$('#slide'+nextImage).animate({left:'-=864px'}, function() {
	$('#slide'+prevImage).css('left', '864px');
});
...

Open in new window

LVL 8

Assisted Solution

by:soupBoy

soupBoy earned 250 total points

ID: 387270102012-12-28

you should probably include your time for the animation and 'wrap' your call back in a function...

Here is your code, modified:

$('#slide'+nextImage).animate({
     left:'-=864px'}, 500, function(){
     $('#slide'+prevImage).css('left', '864px')
});

Open in new window

Here is a jsFiddle showing an example I just created: Animate using Jquery will callback

Author Comment

by:bbdesign

ID: 387270572012-12-28

Ah, I was missing the function. Thanks guys!

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Chart.js - An Introduction

Article by: Rob

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…

7 Sure Fire Ways To Improve Your Web Performance Strategy

Article by: Anush

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…