CODEWITHSUNDEEP
javascriptjqueryjquery-pluginshoverflip
coolpup
coolpup

Reputation: 159

jQuery Quick Flip switch back

I'm using the jQuery plugin Quick Flip, but I'm having two issues with one of my pages.

First, I want it to flip when the mouse hovers, which I've been able to do, but I'd also like it to go back to it's original state when you're not hovering. On the jQuery's forum, others are asking the same question, and the creator says it's possible, but won't provide the code for it. I've tried different methods, even playing with a setTimeout to force it back, but I keep breaking the code each time so I'm clearly not doing it right.

Second, it sometimes won't flip back at all when you hover again if the panel contains a link. My example doesn't show this though. Any idea why that happens?

Here is my example: http://kimkellermedia.com/test3/test2.html

Right now the js is:

jQuery(function($){
$('.quickFlip').quickFlip();

for ( var i = 0; i < $.quickFlip.wrappers.length; i++ ) {
    var thisOne = $.quickFlip.wrappers[i];

    $( thisOne.wrapper ).hover( function(ev) {
        var $target = $(ev.target);

        if ( !$target.hasClass('quickFlip') ) $target = $target.parent();

        $target.quickFlipper();

    }, function() {});
}
});

Upvotes: 1

Views: 1381

Answers (2)

coolpup
coolpup

Reputation: 159

Felix answered my question with his comment:

http://jsfiddle.net/Ae9Lx/

Upvotes: 0

Ivan
Ivan

Reputation: 10382

If you are using QuickFlip v2.1.1, then you have access to quickFlipper which gives you the functionality you want.

From this blog, Jon Raasch states that you can have the flip occur on the hover event by using the following code:

With $.quickFlipper() the flip can be called in the function of your choice. Let's say we want to trigger the flip effect on hover:

$('.quickflip-wrapper').hover( function(ev) {
    $(ev.target).quickFlipper();
});

Upvotes: 2

Related Questions