如何在jQuery中对单击功能使用多个动作

Question

我有一个简单的齿轮图像，当单击按钮时离开页面时，我希望它们反向旋转。 如果导航离开网站，则仅在单击页面内的按钮上时才执行该操作。 这是我的代码：

<script>
    $('#blue1').click( function() {
        $('.animated3').addClass("rotateOut");
        $('.animated2').addClass('rotateIn');   
    });
</script>

当我单击按钮时，只能播放第一个动画，而不能播放第二个动画，我不确定为什么。 任何帮助将不胜感激。我将为多个按钮执行此操作。 注意：另一个元素上已经存在setTimeout函数，以延迟页面卸载。

---

上面代码的CSS是：

    .location {margin-top:-430px; margin-left: 445px;}

    #tjgears {
        position:absolute;
        left:200px;
        top:-120px;
    }

.animated2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  position:relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  position:relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Answer 1

根据您的评论，并且没有看到实际的CSS，它看起来好像rotateIn和rotateOut类（及其关联的过渡）可能会发生冲突，因为它们没有在click事件后被删除。

请尝试以下操作：

$('#blue1').click( function() {
    // Remove any existing transition classes first
    $('.animated2, .animated3').removeClass('rotateIn rotateOut');

    // Add new transition classes to appropriate elements
    $('.animated3').addClass('rotateOut');
    $('.animated2').addClass('rotateIn');   
});

我希望这有帮助！

Answer 2

我做了一个小提琴，应该可以帮助您。 在我的解决方案中，我将toggleClass用于要旋转的两个动画齿轮。 我还使用@ -webkit-keyframes为每个类创建动画。

我没有使用实际的图像，因为我希望没有它就可以达到目的。 http://jsfiddle.net/5qQW9/

HTML ：（修改为套件）

<div id="blue1">
    <div class="animated2">animated2</div>
    <div class="animated3">animated3</div>
</div>

CSS：

@-webkit-keyframes rotateOut {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotateIn {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(-360deg);
    }
}

.rotateOut {
    -webkit-animation: rotateOut 10s linear infinite;
}

.rotateIn {
    -webkit-animation: rotateIn 10s linear infinite;
}

Javascript：

$('#blue1').on('click', function() {
     $('.animated3').toggleClass("rotateOut");
     $('.animated2').toggleClass('rotateIn');   
});

因此，当您单击div时，它将对每个类应用该类，并且在另一次单击上将其删除。 这将产生一个齿轮旋转所需的动画效果，而另一齿轮则旋转相反的方向。