jQuery/animation

JavaScript
1

hi,

I need to do a zoom effect… found this
http://papermashup.com/jquery-image-zoom-effect/
(demo here http://papermashup.com/demos/image-jquery/)

but I need to do it not on hover; I need to trigger it after a timeout… that’s only diff betw their code and mine, but mine is
not working… I don’t get errors, it just doesn’t animate…
http://mayacove.com/dev/jq/anim/anim_mine.html

now in mine what has to happen is I will have a large image of a hall with lots of columns; effect will be zoom in so it looks like you’re walking towards end of the hall; at the end of animation (not yet sure how “far” user is supposed to walk) I need to
load diff content…

would appreciate some suggestions…

thank you…

2

It won’t animate as you aren’t attaching it to the (‘.item’)

Your code:

$.doTimeout(600, function() {
// alert(‘test’);
move = -15;
zoom = 1.1;
width = $(‘.item’).width() * zoom;
height = $(‘.item’).height() * zoom;
$(this).find(‘img’).stop(false,true).animate({‘width’:width, ‘height’:height, ‘top’:move, ‘left’:move}, {duration:300});
});

try:

$(‘.item’).doTimeout(600, function() {
// alert(‘test’);
move = -15;
zoom = 1.1;
width = $(‘.item’).width() * zoom;
height = $(‘.item’).height() * zoom;
$(this).find(‘img’).stop(false,true).animate({‘width’:width, ‘height’:height, ‘top’:move, ‘left’:move}, {duration:300});
});

3

oh man… thank you very much… :slight_smile:

4

I have one more question:

do you know if there’s anyway to keep image centered throughout animation… the way it works now top left corner of img doesn’t budge… I need image to remain centered at all times (sort of like a “cropping” effect)

thank you…