SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    jQuery/animation...

    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. #2
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Melbourne, AU
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh man....... thank you very much...... :-)

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •