我想在我的下拉列表中添加一个
CSS3效果. (就像Instagram.com上的“我的个人资料”一样).
我使用Animate.css的CSS3效果.
我试过这个,但不行.
HTML
<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a> <ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content> <li><%=link_to "Facebook","#"%></li> <li><%=link_to "Email","#" %></li> </ul>
JS
$(document).ready(function(){
$('a').hover(function(){
$("ul").addClass('animated bounceInDown');
});
});
您可以在Zapping.io上找到一个实时版本
解决方法
我以一个例子来工作.我使用了您提供的HTML,然后下载了bounceInDown动画,并在下面的示例中将其用于CSS.
jsFiddle example here – 悬停方式
jQuery的
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){
$("ul").removeClass('animated bounceInDown');
});
});
jsFiddle example – 悬停方式延时.
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){setTimeout(function(){
$("ul").removeClass('animated bounceInDown');
},750);});
});
这些例子假设你想要在悬停上触发动画.如果您希望在点击时触发,请改用：
jsFiddle example点击方法 – 查看下面的替代非JS方法.
$(document).ready(function(){
$('a').click(function() {
$("ul").toggleClass('animated bounceInDown');
});
});
替代方法 – 没有JS / jQuery
如果您不想使用JavaScript / jQuery,可以使用CSS中的复选框.
这实际上是在以下之间切换：选中,从而激活动画.
jsFiddle example – 它适用于所有当前的浏览器.
HTML
<label id="click" for="dropdown">Click here</label> <input style="display:none" type="checkBox" id="dropdown"> <ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content> <li>Facebook</li> <li>Email</li> </ul>
CSS – (只是其中的一部分)请参阅上面的示例以获取完整的CSS.
input[type=checkBox]:checked ~ #dropdownalerts { display:inline-block; -webkit-animation: bounceInDown 1s both; -moz-animation: bounceInDown 1s both; -o-animation: bounceInDown 1s both; animation: bounceInDown 1s both; }
