javascript - jQuery 与 animate.css 切换

Question

使用这个

$('.trigger').click(function() {
    $(this).next().toggle();
});

切换下一个 div 元素效果很好。现在我想用 animate.css 添加一些动画.单击 tricker 链接会打开带有我选择的动画的 div，但再次单击该链接不会关闭该 div。它在点击上面的代码时打开/关闭。我在这里做错了什么？

 <div class="trigger"> 

    <div class="hello">Welcome</div>

</div>      

<div class="drop-down-main" style="display:none";>

    <div class="text">

            <div class"small">Lorem Ipsum</div>

    </div>

</div>

JS

$('.trigger').click(function() {
    $(this).next().toggle().addClass("animated pulse");
});

感谢您的帮助!

Answer 1

animate.css 负责隐藏/显示——删除您在其中设置的 toggle()。

// Before anything else, let's add the animated
//  class and a starting animation.
$(".trigger").next().addClass("animated pulse");

// Each time it's clicked, switch the div
//   off or on, using in/out animations.
$('.trigger').click(function() {
  $(this).next().toggleClass("fadeOut").toggleClass("pulse");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="trigger">
Click me!
</button>
<div>
<p>Pellentesque in ipsum id orci porta dapibus. Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit.</p>

<p>Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh.</p>
</div>