Question

我正在使用Quickflip 2创建多个“翻转面板”，它们共享相同的包装类.quickFlip

其中有两个'状态'，它们是.blackPanel（显示为'onload'）和.redPanel，它是反向...或备用'状态' - QuickFlip通过简单的方式实现翻转这些状态的魔力动画（显然这适用于IE 8＆gt; Safari，Firefox和Chrome ......好东西？！）

我遇到了问题：因为我正在处理多个（最多9个）我想在选择新面板时自动关闭（或重置）所有打开的面板。

代码：

    $(function() {
    $('.quickFlip').quickFlip();
    $('.redPanel').on('mouseleave',function(){
 $('.quickFlip').quickFlipper( {}, 0 );
  });
});

以下是http://jsfiddle.net/sMYzS/152/

的实例

然而......在这个例子中，无论它们处于什么状态，它都会在每个面板上运行动画（翻转）。

我确定答案在于将.quickFlipper函数应用于除活动之外的所有函数（你能说在jQuery中吗？）类/区域。对不起，如果我完全失去了声音。

我刚接触jquery已经调查过使用.each / .mouseover并添加了使用javascript的不同函数：onclick来“隐藏”每个非活动状态......但我现在已经丢失了。经过15个小时的黑客攻击，我决定来这里，多年来我找到了一个很棒的资源。如果你能指出我正确的方向 - 这将是辉煌的。谢谢！

以下是一些类似的黑客，我试图修改以满足我的要求： jQuery Quick Flip switch back

Quickflip 2 Plugin - only having the image flipped once?

Answer 1

这个小提琴解决了你遇到的问题：

http://jsfiddle.net/vyyVh/1/

在上面的代码中，这一行

$('.quickFlip').quickFlipper( {}, 0 );

使用“quickFlip”类对所有元素进行操作 - 即所有面板。

默认情况下，插件会监视带有“quickFlipCta”类的链接的点击，因此我为这些元素添加了另一个处理程序，在单击时将“翻转”类添加到包装div。

$('.quickFlipCta').click(function() {
    $(this).parents('.quickFlip').addClass('flipped');
});

现在我们可以使用“quickFlip”类来解决问题，而不是使用“翻转”类来查找内容，而是在类被解除后删除它。

$('.redPanel').on('mouseleave', function() {
    $('.flipped').quickFlipper({}, 0);
    $('.flipped').removeClass('flipped');
});

但是如果你想让面板保持翻转直到你点击另一个面板，那么这就是一个小提琴：

http://jsfiddle.net/vyyVh/3/

这次翻转/解除逻辑都在点击处理程序中 - 希望评论能够清楚地说明那里发生了什么。

quickflip-2多个面板

1 个答案: