繁体   English   中英

jQuery使用animate.css切换

[英]jQuery toggle with animate.css

使用这个

$('.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");
});

谢谢你的帮助!

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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM