We Keep Coding

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 callback freezing up

I made a little fiddle to illustrate the problem.
Basiaclly this works:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
});
setTimeout(function() { hidden.fadeIn('slow') },1000);
and this doesn't:
var visible = $('#container').find(' > div:visible'),
hidden = $('#container').find(' > div:hidden');
visible.fadeOut(1000, function() {
hidden.fadeIn(100)
});
The second way makes the page freeze up.
Is there something wrong with the way I'm using the callback?
I need to be able to put it in an animation queue, because I need to be able to stop() everything.
Is there any way to make this work? I's broken on Chrome and FF

The problem in your 2nd solution is, that an animation will be started for each visible div and for each animation (which has finished) all hidden divs start the fade in animation.

Uhh, first of all, why are you using such construction:
$('#container').find(' > div:visible');
Just use:
$('#container > div:visible');
Second, don't use #container because for some reason if fires fadeOut for 301 elements inside which is just too much.
Scratch that, i see jsfiddle has been changed and now it's only one element in there. Not surprised that it crashed before - too many objects.
Third, after fadeOut nothing fades in because at the point when you assign hidden variable there is no hidden divs. You'll have to use this in your callback:
$('#container2 > div:hidden').fadeIn(1000)

Scrolling content right to left Javascript

I have a page with a horizontal width of 4000px
How would i go about creating an event that starts as soon as the page loads and cycles from the far right to left of the page? I want to show all the content and get the user back to the start if you get me
Ideally coded in javascript but will accept CSS3 (if it can be done)
Thanks Guys,
DIM3NSION
Based on your responses i have tried to get this working, but with no avail.
Help much appreciated
<script type='text/javascript'>
$(document).ready(function(){
function start(){
document.body.scrollTo(4000, 0);
var x=4000;
var t= setInterval(function(){ x-=50
if (x<=0){ clearInterval(t); document.body.scrollTo(0,0); return; } document.body.scrollTo(x, 0); }, 20) }
});
</script>

The jQuery scrollTo plugin does exactly what you need. See it in action. Combined with the setTimeout or setInterval function, you could easily achieve your goal.

I'm not sure if this would work for an entire page, but it could be slicker than using the built in browser scrollbars, and easier to set up, to boot: http://logicbox.net/jquery/simplyscroll/

There's probably some errors in this code, since I'm typing it on my phone, but something like this should work. Just stick it in a window.onload function.
function start(){
window.scrollTo(4000, 0);
var x=4000;
var t = setInterval(function(){
x-=50; // or whatever
if (x<=0){
clearInterval(t);
window.scrollTo(0,0);
return;
}
window.scrollTo(x, 0);
}, 20)
}

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.

Code Help, Mootools fading image on the gallery

I need help enhancing this Gallery (tutorialdog.com/javascript-image-gallery-using-mootools/),
I've tried on my own (I'm new to js programming), But I haven't figure it out how to code it right resulting to the effect that I want. I've tried chaining the opacity but I wasn't successful.
here's the code
window.addEvent('domready', function() {
var drop = $('large');
var dropFx = drop.effect('background-color', {wait: false});
$$('.item').each(function(item){
item.addEvent('click', function(e) {
drop.removeEvents();
drop.empty();
var a = item.clone();
a.inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
});
});
});
Basically the effect I want is, I want to add fading effect on the large preview once it has been clicked.
Thanks!

you can just do drop.fade("in"); to affect the whole larger zone or you could do a.inject(drop).fade("in"); to only fade the larger image