jQuery快速翻转切换回来 [英] jQuery Quick Flip switch back

问题描述

我使用的是jQuery插件Quick Flip，但我的页面有两个问题。

首先，我希望它在翻页鼠标悬停，我已经能够做到，但是我也希望它在没有悬停的时候回到原来的状态。在jQuery的论坛上，其他人都在问同样的问题，创建者说这是可能的，但不会为它提供代码。我尝试了不同的方法，甚至使用setTimeout来强制它返回，但我每次都不断破坏代码，所以我显然没有正确地做。

其次，如果面板包含链接，则有时再次悬停时有时不会翻转。我的例子虽然没有显示。任何想法为什么发生这种情况？

这是我的例子： http://kimkellermedia.com/test3/test2.html

现在js是：

  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（）{}）; 
} 
}）; 
  

解决方案

费利克斯用他的评论回答了我的问题：

http://jsfiddle.net/Ae9Lx/ p>

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() {});
}
});

解决方案

Felix answered my question with his comment:

http://jsfiddle.net/Ae9Lx/

这篇关于jQuery快速翻转切换回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！