CODEWITHSUNDEEP
jqueryhtmlprogress-barcyclejquery-hover
user995542
user995542

Reputation: 61

Pause/Resume Animation with Jquery Cycle

UPDATE

I've got it working to an extent, i'm not sure why but once an animation is called using the after callback with cycle, it seems like the only way to interact with it is by using jquery's .stop method.

If anyone could shed some light into this for me, that'd be awesome.

Thanks!

ORIGINAL QUESTION BELOW

I'm using this Pause/Resume plugin: http://tobia.github.com/Pause/

I have tested it out with a simple animation and it works great.

My issue is that i'm trying to use it within Jquery Cycle, and it's not working at all.

Currently, I have a pretty standard cycle slider, which has a navigation. Each navigation item has a timer bar, which starts at 320px, and animates down to 0 based on the length of each slide.

I'm trying to figure out how to incorporate that pause plugin with this, so the timer bar animation will pause when I hover over the slideshow, and resume when I mouse out.

Can anyone help me out here?

Thanks in advance.

Here's my code:

HTML (only showing one slide to keep code to minimum)

    <div id="slider_images"> 
            <div class="slideshow"> 
            <div><img src="img_path" title="Slider Span" alt="Slider Span"/> <div class="slider_buttons"><a href="/index.php?p=about-us" class="learn-more-btn">Learn More</a> <a href="#" class="send-me-information fancyNews">Send Me Information</a></div> </div>
       </div> 
        </div> 


<ul id="multiNav"><li><a class="slide0" href="#">Why CBHM?</a> 
<p> 
Why You Should Choose Us
</p> 
<div id="progress-bar"></div> 
<div id="progressbar"> 
    <div id="progressvalue"></div> 
</div> 
</li> 
</ul>

JS

    $('.slideshow').cycle({
    fx: 'fade',
    timeout: 7000,
    pager: '#multiNav',
    after: onAfter,
        before: before,
    pagerAnchorBuilder: function(idx, slide) {

    return '#multiNav li:eq(' + (idx) + ') a';

    }

});

function before() {
$('.activeSlide #progress-bar').css({ width: "0%" });

}


function onAfter() {
$('.activeSlide #progress-bar').animate({ width: "280px"}, 0, function() {
$('.activeSlide #progress-bar').animate({ width: "0px" }, 6200);
});

}


$("#container_Slider").hover(function() {   
$('#progress-bar').pause();
}, function() {
 $('#progress-bar').resume();
});

Upvotes: 1

Views: 1887

Answers (2)

Sean Beck
Sean Beck

Reputation: 180

This is a little late, but you can pause an animation using animation-play-state. Combined with jquery hover you get something like this...

$(".slideshow").hover(
    function() {
        $('.activeSlide #progress-bar').css({
        "animation-play-state" : "paused",
        "-webkit-animation-play-state" : "paused",
        "-moz-animation-play-state" : "paused",
        "-o-animation-play-state" : "paused"
        });
    },
    function() {
        $('.activeSlide #progress-bar').css({
        "animation-play-state": "running",
        "-webkit-animation-play-state": "running",
        "-moz-animation-play-state": "running",
        "-o-animation-play-state": "running"
        });
    }
);

Upvotes: 3

Blazemonger
Blazemonger

Reputation: 92893

Skip the pause plugin -- jQuery Cycle has pause/resume functionality built-in.

$("#container_Slider").hover(function () {
    $('#slider_images .slideshow').cycle('pause');
}, function () {
    $('#slider_images .slideshow').cycle('resume');
});

Upvotes: 2

Related Questions