Efeito de slide Javascript onclick
Eu gostaria de adicionar um efeito slide & fade a um DIV, com o Javascript, usando "onclick".
O código está aqui:http://jsfiddle.net/TCUd5/
O DIV que tem que deslizar tem id = "pulldown_contents_wrapper". Este DIV está contido em um SPAN, que também o aciona:
<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
<div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">
E acho que o código JS que controla o onclick do SPAN é:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
Se não for possível fazer isso com o JS puro, você tem uma ideia de como eu poderia fazer isso com o Mootools? (* Eu gostaria de usar apenas JS puro ou o framework Mootols).
Eu tentei implementar o código de:por que o javascript onclick div slide não está funcionando? mas sem resultados.
Muito obrigado.
Eu consegui fazer isso com o Mootools, mas não consigo descobrir como adicionar um efeito de slide e fade, e um atraso no mouseout
window.addEvent('domready', function() {
$('updates_pulldown').addEvents({
mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
physics: 'pow:in:out',
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).show();
},
mouseleave: function(){
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
delay: 1000,
}).hide();
$('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
},
});
});
var toggleUpdatesPulldown = function(event, element, user_id) {
showNotifications();
}
Qualquer ideia?