I got it working in an example. I used the HTML you provided, and then downloaded the bounceInDown
animation and used that for the CSS in the examples below.
jsFiddle example here - hover method
jQuery
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){
$("ul").removeClass('animated bounceInDown');
});
});
If you want to add a delay when hovering off, use something like this:
jsFiddle example - hover method with delay.
$(document).ready(function(){
$('a').hover(function() {
$("ul").addClass('animated bounceInDown');
},function(){setTimeout(function(){
$("ul").removeClass('animated bounceInDown');
}, 750);});
});
Those examples are assuming you want the animation fired on hover. If you want it fired on click, use something like this instead:
jsFiddle example click method - Look below for an alternative non-JS method.
$(document).ready(function(){
$('a').click(function() {
$("ul").toggleClass('animated bounceInDown');
});
});
Alternative method - No JS/jQuery
If you don't want to use JavaScript/jQuery, you can use the checkbox hack in CSS.
This essentially toggles between :checked
, thus activating the animation.
jsFiddle example - It works in all current browsers.
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 - (only part of it) See the example above for full 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;
}