Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

jQuery animate callback problem

Posted on 2012-12-28

2 solutions

Medium Priority

361 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 1000 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 1000 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…

Cloud+Hadoop – A Boom To Cloud Market; Know What AWS & Azure Has To Contribute

Article by: Shakshi

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

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…