Javascript+GreenSock-点击开/关按钮后tweens无法正常工作

我有一些基本的Javascript和GreenSock问题，一些扑克牌动画和一个按钮。我正在尝试让测试中的扑克牌阵列

悬停时向下移动-完成 在点击时翻转卡片以显示另一面，然后一旦鼠标离开卡片面，它应该向后翻转-完成 执行开/关按钮，在显示所有卡片面/显示所有卡片背面之间切换-完成 现在这里是问题出现的地方，一旦它们在一次会议中全部完成

一旦开/关按钮被点击一次，用户就会陷入一个循环中，您只能使用开/关按钮旋转卡片

我认为这是因为on/off按钮处于活动状态，所以它只使用动画的off或else部分，问题是我无法思考如何解决问题并在显示所有卡后启用正常功能。我想用一种不同的方法，而不是本质上的真/假来控制，但我正在努力得到任何想要的结果

第二个问题是，一旦显示了所有的牌面，我希望它忽略之前的悬停翻转动画，并保持这些面显示，直到单击一张牌或按钮将其全部翻转，但这与第一个问题相比并不重要

任何帮助都将不胜感激，因为这从昨天起就一直困扰着我

---

这是因为onoff函数将一个click事件绑定到卡容器中，完全没有可感知的原因。因此，当从“所有翻转的卡”视图返回时，单卡翻转动画将与绑定到上次翻转所有背面卡时的开关值的动画竞争

我以不同的方式编写我的tween代码，但以下改编适合我：

var switchVal = document.getElementById('onoff').value,
    cardFlip = $('.cardflip'),
    allCards = cardFlip.find('.card');

var switchProps = {
    off: {scale:1, rotationY:20, ease:Power4.easeout },
    on: {scale:1.2, rotationY:180, ease:Strong.easeout }
};

function onoff(){
    if (switchVal === 'Off') {
        switchVal = "On";
        TweenLite.to(allCards, 2.0, switchProps.off);
    } else {
        switchVal = "Off";
        TweenLite.to(allCards, 1.0, switchProps.on);
    }
};

如果您确实发现需要维护该点击事件的某些目的，请确保在从“全部卡片翻转”视图返回时解除绑定

---

**另外，这不是你问题的根源，但应该注意，你的CP的Tween混合了TweenLite和TweenMax。

你是个好人！非常感谢。这已经被搁置，因为这是张贴几个月前，所以我感谢帮助。另一方面，当点击show all（全部显示）按钮后所有卡片都面朝上显示时，有没有更好的方法来编写我的单数悬停和单击功能，这样当你将鼠标悬停在单个卡片上时，它就不会将它们翻转回来？

var switchVal = document.getElementById('onoff').value,
    cardFlip = $('.cardflip'),
    allCards = cardFlip.find('.card');

var switchProps = {
    off: {scale:1, rotationY:20, ease:Power4.easeout },
    on: {scale:1.2, rotationY:180, ease:Strong.easeout }
};

function onoff(){
    if (switchVal === 'Off') {
        switchVal = "On";
        TweenLite.to(allCards, 2.0, switchProps.off);
    } else {
        switchVal = "Off";
        TweenLite.to(allCards, 1.0, switchProps.on);
    }
};