Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Control JQuery Animation Sequence

Posted on 2011-03-09
2
Medium Priority
?
911 Views
Last Modified: 2012-05-11
Hi All,

I want to have a slide up bar appear on my last slide which also revels a text link when it slides up and stay there, and it would stay visable for like 8 seconds then slide  back down and hide.

Currently I'm using this code to achieve it, but also I am trying to control the timing of another selector, text, but on one server it works, but on another, i had to modify the values of the 'setTimeout' function, but still can't get it to work properly, are these settimeout values eq 6500 normal to have?

Here is the snippet of code from the attached code, this is where the animation happens and where my issue is:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
      return this.animate({opacity: 'toggle'}, 400, easing, callback);  
    };
    
    /* .fadeToggle('slow'); */

	
     
	$("#headerimg" + currentContainer).animate({width: 'toggle'},700,function() {

		    setTimeout(function() {
		    		$('#expandingFooter').slideToggle();
                	$(".pictureduri").fadeToggle('slow');
           		}, 6500); 
           
            setTimeout(function() {
            	
                $("#headertxt").fadeToggle('slow');
                animating = false;
            }, 1700);
        });

Open in new window

/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Stairs",
		"image" : "vacation.jpg",
		"url" : "http://www.sxc.hu/photo/1271909",
		"firstline" : "Dubstep is a genre of electronic dance music",
		"secondline" : ""
	}, {
		"title" : "Office Appartments",
		"image" : "work.jpg",
		"url" : "http://www.sxc.hu/photo/1265695",
		"firstline" : "Or still busy at",
		"secondline" : "work?"
	}, {
		"title" : "",
		"image" : "biking.jpg",
		"url" : "http://www.sxc.hu/photo/1221065",
		"firstline" : "Get out and be",
		"secondline" : "active"
	}, {
		"title" : "",
		"image" : "nature.jpg",
		"url" : "http://www.sxc.hu/photo/1271915",
		"firstline" : "Take a fresh breath of",
		"secondline" : "nature"
	}, {
		"title" : "Italian pizza",
		"image" : "food.jpg",
		"url" : "http://www.sxc.hu/photo/1042413",
		"firstline" : "Enjoy some delicious",
		"secondline" : "food"
	}
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$(".pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer) .toggle('slow', function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 2000);
		});
	};
	
	
	
	
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});

Open in new window

0
Comment
Question by:VAN_AL
2 Comments
 
LVL 1

Author Comment

by:VAN_AL
ID: 35092167
How do I get my div to appear only when "title" : "" has a value and not if it's empty "" ?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 35093196
You mean

if ($("#headertxt").html() !="") {
  setTimeout(function() {
    $("#headertxt").css({"display" : "block"});
    animating = false;
  }, 2000);
}
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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)
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…
Suggested Courses

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question