We Keep Coding

Jquery create animation swapping a series of images in a div

I am trying to create an effect where i display a short animation wherever the user clicks on a page. For this i need to quickly swap background image of a div with an array of image once. I couldn't find a way to do that just with the animate() or fadeOut() methods in jquery, so i tried it with setTimeout(), but all in vain. Please guide me to the best technique for what i am trying to do.
JSFiddle
P.S: I am having problems with including JSFiddle links in my posts, so i will leave it to others for edit. Although an explanation to this would help a lot.

This should work:
var imgc;
var images = Array("http://s11.postimg.org/8iznatxr3/image.png",
"http://s11.postimg.org/g08uq1na7/image.png",
"http://s11.postimg.org/hgkd86q73/image.png",
"http://s11.postimg.org/5fyx7gisf/image.png",
"http://s11.postimg.org/3pfw5z19b/image.png");
$(document).click(function(e){
imgc = -1;
$('#ball').show().css({left:e.pageX +'px',top:e.pageY+'px'});
setImage();
});
function setImage() {
imgc++;
var newimage = images[imgc];
if (imgc < 5) {
$('#ball').fadeOut(50).css("background-image", "url("+newimage+")").fadeIn(50);
setTimeout(setImage, 100);
}
}
JSFiddle
Note that I replaced animate() with fadeIn() and fadeOut().

animating one image tag with changing src attribute using jQuery

I have an application in which the one division contains a image that need to change in every three second. But the problem is that I also need to add some animations to that changing event. I have tried few things but those are not looking very pleasing. Is there any way I can use animate() on this? My code which just changes the images is as follows:
var arrayOfImages //asssume that this array have 10 images
var i = 0;
setInterval(function(){
$('.imageBox').attr('src', arrayImg[i]);
i++;
if(i == 10) i=0;
}, 3000);
Other then this I have tried fadeIn and fadeOut too, but this is also looking very naive.
var i = 0;
setInterval(function(){
$('.imageBox').fadeOut(500, function() {
$('.imageBox').attr("src",arrayImg[++i]);
$('.imageBox').fadeIn(500);
});
if(i == 10) i=0;
}, 3000);
Please any help on this is appreciable. Thank you in advance
this is link for fiddle http://jsfiddle.net/apf5X/8/

Have you tried jQuery Cycle 2?
It's a really powerful plugin with lots of animations. Not only for images but for any html tag!

It would probably be be easier to use a library.
Here are some suggestions to get you started:
http://flexslider.woothemes.com/
http://dimsemenov.com/plugins/royal-slider/
There are many more to choose from. A good keyword to search for would be javascript image slider or jquery image slider.

jQuery page fadeIn() only working on index page

Thanks everyone, for the quick help! Script now works. I've updated the site and code below. Maybe someone can find this code useful. :)
I've gotten the page (http://www.katmcgo.com) to fade in as desired using jQuery. However, it only fades in on the index page -- all subsequent pages load as normal.
I have the following script in the header of each page (including the sub-pages that are not fading in); it is included in each page using PHP:
$(document).ready(function() {
function fadePage() {
// Target the tags you want to effect with the fade
var fadingTag = "section";
var fadingTag2 = "hr";
var delay = 0; // Initialize delay - Should start at 0
var delayStagger = 600; // Delay stagger - Time between elements fading in
var fadingNum = document.getElementsByTagName(fadingTag).length; // Find out how many elements you need to hide
// Get and fix the overall document height before it disappears (which will happen when elements are hidden)
var pageHeight = $(document).height() + "px";
$("#wrapper").css("height", pageHeight);
// Hide all targeted tags
$(fadingTag).css("display", "none");
$(fadingTag2).css("display", "none");
// Fade each targeted tag in, one by one
for (var i = 0; i < fadingNum; i++){
$($(fadingTag).get(i)).delay(delay).fadeIn(delayStagger);
$($(fadingTag2).get(i)).delay(delay).fadeIn(delayStagger);
delay += 350;
}
}
fadePage();
});
I've been racking my brain as to why this is happening, and doing searches to the find the answer, but coming up with nothing...
This page is in the early stages, so I'm just doing dev in Firefox and Safari... fade works in both, but only on the first page. Any help would be greatly appreciated.

install firebug in firefox. your getting an undefined element[0] on all pages except index.php.
Edit:
wrap your s3Slider call inside an if statement checking if the element exists.
if( $('#slider').length ) {
$('#slider').s3Slider({
timeOut: 3500
});
}
Alternatively you could not output that code from the server if your not on the index page.

You have an error coming from s3Slider.js on all of your subsequent pages. Probably because the slider element does not exist on those pages, but the plugin is still being called.
The fade script probably works fine.

Javascript function call on page both onload and onclick?

I need help with changing a function that is called once the page loads, and anytime afterwards when the user clicks on a certain div with an ID. So far I have this:
window.onload=function() {
//Do your stuff, JS!
}
Yes, I barely know any JS...
EDIT: I will include my JS function (I didn't make it myself, obviously another nice and smarter person did :P)
function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("Content").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
What it does: I have a div container that houses x number of column divs. These columns vary at height due to content. This function makes all the divs heights the same.
When my page loads, this code runs flawlessly. However afterwards, it doesn't. I have some collapsible divs that house extra information, when a user clicks it will push the height further. This is why I thought of an onclick for that id... unfortunately the id is dynamically generated by php.

You can define a function separately and then bind it to multiple event handlers:
function myHandler(){...}
window.onload = myHandler;
myElement.onclick= myHandler;
...

This should fix it:
function f() {
// do your stuff
}
window.onload = f;
document.getElementById("myButton").onclick = f;

Another way:
window.onload=function() {
//Do your stuff, JS!
}
yourElement.onclick = window.onload;
In the end it does not matter how you do it. Functions are first class objects, so you just need to have a reference to the function.
To learn more about JavaScript, have a look at the MDC JavaScript Guide.

How to use JS to trigger a GIF animation?

I have an animated GIF that plays once (doesn't loop). I would like it to animate when clicked.
I tried something like this:
$('#plus').click(function(){
$('#plus').attr('src','');
$('#plus').attr('src','img/plus.gif')
});
With the hope that quickly resetting the src would trigger the animation, but no luck. Anyone know what would do it?

Try adding the image with a randomly generated querystring so it looks like a new image to the browser.
<script language="javascript" type="text/javascript">
function randomString() {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var string_length = 8;
var randomstring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
$('#plus').attr('src','img/plus.gif?x=' + randomString())
});
</script>

function refreshSrc(who){
return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])
Tart it up with jQuery syntax, if you like.

This is a bit of an alternative approach.
You could export the individual frames as their own images and handle animation via javascript.
It lets you do a couple of cool things. A colleague recently had a little timer animation that was synced to the configurable slideshow interval in our image gallery.
The other thing you get out of this is you could use pngs and have translucent backgrounds.
There's probably a sprite animation library for javascript out there somewhere :)

Have you tried removing the img tag and adding it back again? (never tried it, just an idea)

You could try having a single-frame image (of the first frame of animation) and show/hide each one on click. If you want it to reset back to the single-frame image when the animation is done, you could use setTimeout (with how long the animation is as the length of time) and have it hide the animation and show the static image.

For those who want to do this when it scrolls into view i did the following.
Link for appear.js : https://github.com/morr/jquery.appear
$('img.large-magnify-glass-animation').appear(function() {
$(this).delay(200, function(){
$(this).attr('src','http://example.com/path/to/gif.gif');
});
});
I just loaded the same gif via the attr('src') upon visiblity after a short delay. No timestamp or random char function. Just used appear plugin.