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（）。

＆＃13;

// 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");
});

＆＃13;

<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>

＆＃13;

jQuery与animate.css切换

1 个答案: