JQuery click et mouseover

Bonjour à tous,

Je débute en jQuery, j'ai écrit une petite fonction mais qui ne donne pas du tout le résultat que je souhaite.

Je souhaiterais faire apparaitre un div lorsque l'on clique sur une image "boite" et faire disparaitre ce div lorsque la souris n'est plus au dessus de la boite.

$(document).ready(function(){

	$('#effet_mots').hide();
	
	$('#boite').click(function(){
	$('#effet_mots').show('slow');
	});
	
	$('#boite').mouseleave(function(){
	$('#effet_mots').hide('fast');
	});

});

Le résultat donne que lorsque je clique sur ma boite le div "effet_mots" apparait bien mais il disparait aussitôt alors que ma souris est toujours au dessus de la boite. De plus le div "effet mots" arrive par la droite, alors que je souhaiterais une apparition progressive mais de la ou il est placé.

Pouvez-vous m'aider ?

Merci d'avance

Tu as une page d'exemple ?
Au premier coup d’œil, je ne vois pas le soucis.