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
    2,469
    Thanks
    16
    Thanked 422 Times in 420 Posts
    Blog Entries
    20

    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
    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

  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
  •