Animate images/Jquery

[tiagoroldao]

Hi guys :)

Check the slideshow at this site: jular[dot]pt

I liked the effect of slow zoom, and want to make something like that in this page http://www.ligoro.pt/index_.php but not in flash, maybe some animation in jquery?

The images that i want to apply this effect are in #destaque_container, that has 5 images variating with class (.index1, index2, etc – div id=”destaque_container” class=”index1″ )

I was wondering.. maybe make a bigger image than the container and them zoom out? Just dont know how to apply the effect of the animation.

Thanks a lot.

[tiagoroldao]

Help please… :(

[tiagoroldao]

1. Its something like this.. I want to show the first image (class: index1) make the animation and fade out.
2. Remove class index1 and add index2 (second image)
3. And the same…..

Anyone can help-me completing the script please? :)

[tiagoroldao]

Here is my progress:

setInterval ( “Banners()”, 25000 );

function Banners() {
$(‘#destaque_container’)
.animate({backgroundPosition: ‘-150px 0’}, 5000, function() {
$(‘#destaque_container’).removeClass(‘index1’).addClass(‘index2’);
});

$(‘#destaque_container’)
.animate({backgroundPosition: ‘100px 0’}, 5000, function() {
$(‘#destaque_container’).removeClass(‘index2’).addClass(‘index3’);
});

$(‘#destaque_container’)
.animate({backgroundPosition: ‘-100px 0’}, 5000, function() {
$(‘#destaque_container’).removeClass(‘index3’).addClass(‘index4’);
});

$(‘#destaque_container’)
.animate({backgroundPosition: ‘100px 0’}, 5000, function() {
$(‘#destaque_container’).removeClass(‘index4’).addClass(‘index5’);
});

$(‘#destaque_container’)
.animate({backgroundPosition: ‘-100px 0’}, 5000, function() {
$(‘#destaque_container’).removeClass(‘index5’).addClass(‘index1’);
});
}

$(document).ready(function() {
Banners();
});

Its working.. but how can i apply a fadein/fadeout effect? Thanks….

[Rob MacKay]

Where you set your backgroundPosition – just set another one for opacity.

.animate({backgroundPosition: '100px 0', opacity: '1'}

.animate({backgroundPosition: '-100px 0', opacity: '0'}

[tiagoroldao]

Thanks. I cant run this code in IE7/6.. Why? I though Jquery was compatible with them

[Author]

Posts