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类（及其相关的转换）可能会发生冲突，因为它们之后没有被删除点击事件。

尝试以下方法：

$('#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时，它会为每个类应用该类，而在另一个单击时将其删除。这将创建一个齿轮单向旋转和另一个相反方向旋转的所需动画效果。

如何在jquery中为单击函数使用多个动作

2 个答案: