Results 1 to 3 of 3

Thread: Repeat jQuery animation every 5 sec

  1. #1
    Join Date
    Jul 2008
    Location
    Serbia
    Posts
    47
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default Repeat jQuery animation every 5 sec

    Hello,

    Jquery animation help needed. I'm using cycle plugin, and every slide have caption: h1 and p. Animation created for caption is below but don't know how to repeat every 5 sec.

    h1 and 5 sliding from left and after 3 sec they slide back (to left) again.

    Code:
    jQuery('.description h1').delay(400).animate({left: '0px' }, 700, 'easeOutBack').delay(3000).animate({left: '-650px' }, 700, 'easeOutBack');
    jQuery('.description p').delay(500).animate({left: '0px' }, 700, 'easeOutBack').delay(3200).animate({left: '-650px' }, 700, 'easeOutBack');
    Grateful for any help
    Thanks

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Look into "everyTime()" - timers plugin for jQuery: http://plugins.jquery.com/project/timers

    See;
    everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])
    everyTime will add the defined function (fn) as a timed event to run at a given time interval (interval) for a given number of times (times). If times is set to 0, the number of times the method is called is unbounded.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Serbia
    Posts
    47
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Hi Beverleyh,

    I tried timers plugin before started this thread... and didn't fit my needs. I found perfect solution for caption in cycle plugin:

    Code:
    $('#slideshow').cycle({
            before: onBefore,
            after: onAfter
    });
    
    function onBefore() {
        $('p').hide();
    }
    function onAfter() {
        $('p').css({opacity: '0.5'}).slideDown('slow');
    }
    Thanks to Paul from
    http://old.nabble.com/

Tags for this Thread

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
  •