[Resolvido] Customizar painel jquery

[marcelo2605 10]

Preciso criar um painel no pé do site que se expanda quando o mouse passar por cima dele. Encontrei este código aqui:

 

$(document).ready(function(){

$(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active");
});

});

 

O problema é que ele foi feito para que o painel se expanda e se recolha ao clicar no botão .byn-slide. Como posso transformá-lo para que funcione no estilo mouseover, mouseout?

[William Bruno 1501]

troque o click() por hover()

 

verifique a sintaxe:

http://api.jquery.com/hover/

[marcelo2605 10]

William, obrigado pela ajuda. Mas se eu trocar pelo hover, isso não significa que o painel também se recolherá quando o mouse estiver sobre ele, gerando um movimento louco?

[marcelo2605 10]

William, troquei por hover mas agora o painel não se move. Olha como ficou o código:

 

$(document).ready(function(){

$(".btn-slide").hover(handlerIn, handlerOut)(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active");
});

});

[William Bruno 1501]

erro de sintaxe.

 

$(".btn-slide").hover(function(){

debugue teus códigos, apertando Ctrl+Shift+J no Firefox. Corrija os erros que aparecerem.

[marcelo2605 10]

William, consegui o que queria usando outro código:

 

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").hover(function() { //When trigger is clicked...

	//Following events are applied to the subnav itself (moving subnav up and down)
	$(this).parent().find("ul.subnav").slideDown('slow').show(); //Drop down the subnav on click

	$(this).parent().hover(function() {
	}, function(){	
		$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
	});

	//Following events are applied to the trigger (Hover events for the trigger)
	}).hover(function() { 
		$(this).addClass("subhover"); //On hover over, add class "subhover"
	}, function(){	//On Hover Out
		$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});

 

E para fazer o painel surgir de baixo para cima, segui as instruções desta página:

CSS