CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Antonin Cezard
Antonin Cezard

Reputation: 2021

Hover with jQuery cycle : go next then pause

I'm trying to make a cycle div. The wanted final effect is : being able to click on div1 to see div 2. Being able to click div 2 to see div 1 again. Being able to also do this with only keyboard ==> this is done and working.

But the second part of my goal is giving my problems. Basically I want this : when I hover div1, the slide go to div2. But it has to stop sliding immediately. It must go back to div 1 when the hover is ended.

Here is what I tried but doesnt work :

$(document).ready(function() {

    $('#s1').cycle({ 
        fx:     'slideY', 
        speed:  300, 
        next:   '#s1', 
        timeout: 0,
        after: function (curr, next) {
            $(next).find('.goto').focus();
        }
    });

    var cycleConfigured = false;

    $('#s1').hover(
        function() {
            if(cycleConfigured)
                $(this).cycle('resume');
            else
            {
                $(this).cycle({
                    fx:     'fade',
                    speed:   600,
                    timeout: 300,
                    slideResize: false,
                    pause:   0,
                    after:  function() {
                        $(this).cycle('pause');
                    }
                });
                cycleConfigured = true;
            }
        },
       function(){
            $(this).cycle('pause');
        }
    ).trigger('hover');
});

jsfiddle http://jsfiddle.net/gy8p5ewv/3/

basically as you can see, when I hover the div, it starts sliding and I cant stop it.

To sump up, here is the wanted effect I cant reach :

on hover container div > go div 2 permanently

on leaving hover container div > go back to div 1 permanently

documentation : http://jquery.malsup.com/cycle/options.html

Upvotes: 2

Views: 54

Answers (1)

mehmetseckin
mehmetseckin

Reputation: 3107

Instead of getting it complicated, just replace the hover callback with a trigger like this :

$('#s1').hover(function () {
   // Trigger a click. 
   $('#Goto2').click();
});

Working fiddle

When we hover on #s1 we want the div to behave as if #Goto2 was clicked, and switch the slides.

Upvotes: 2

Related Questions