Citation :En fait je croit que le problème vient du stop...
FadeIn va rentre visible la bulle jusqu'à l'opacité spécifier avec css, mais avec le stop cette opacité change s'il est lancé avant l'apparition complète de la bulle.
Non, le stop() fonctionne bien, il empêche l'animation de ce lancer plusieurs fois de suite, j'ai fait les teste avec et sans, sa fonctionne moi bien sans.
J'ai presque réussi à viré tout les problème, il ne reste que quelques truc bien chiant:
Les codes a jour tout d'abord:
le CSS de la bulle:
#tips
{
position:absolute;
z-index:1000;
background: #ff0000;
width: 200px;
}
Le document.ready:
$(document).ready(
function ()
{
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
//Fade de la tips
$("div#tips").fadeTo(0,0);
}
);
Le code de l'info-bulle:
(function($) {
$.valmetips = {
freeze: false,
//Fonction qui ajuste la hauteur de la div
taille_tips: function() {
height = $("div#tips").height();
$("div#tips").height(height);
}
,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind("mousemove",moveHandler)
.unbind("mouseout",outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind("mousemove", moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind("mouseout",outHandler);
//Injection du message
$("div#tips").html(title+message);
//on ajuste la taille de la bulle
$.valmetips.taille_tips();
//On affiche
$("div#tips").stop().fadeTo("slow",1);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").stop().fadeTo("slow",0);
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths).unbind();
//cachage de la div rapide
$("div#tips").stop().fadeTo(0,0);
$("div#tips").html(title+message);
//On ajuste la taille de la bulle
$.valmetips.taille_tips();
//on affiche la div
$("div#tips").css({top: (sourisTop)+"px", left: (sourisLeft)+"px"});
$("div#tips").stop().fadeTo("slow",1);
//On active le freeze
$.valmetips.freeze = true;
$("div#tips").mouseout(function() {
$.valmetips.unclick_tips();
});
}
,
unclick_tips: function() {
//On la rend invisible
$("div#tips").stop().fadeTo("slow",0);
//On désactive le freeze
$.valmetips.freeze = false;
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
unclick_tips = function() {
$.valmetips.unclick_tips();
}
})(jQuery);
Et enfin, ma petite surcouche qui sert a intégre le script dans le jeu:
/************ DEBUT de l'Overvalme **************************************************************/
/* Ceci est une surcouche permettant facilement de changer le rendu ou le moteur des info-bulle */
function overvalme(texte,titre)
{
return over_tips(texte, titre);
}
function overvalme_clic(titre,texte)
{
return click_tips(texte, titre);
}
function overvalme_large(texte,titre)
{
return over_tips(texte, titre);
}
/************ Fin de l'Overvalme ******************************************************/
Le html pour le teste:
Code :
<br /><a onclick="overvalme_clic('Freeze','Banzai freeze !');" onmouseover="overvalme('teste','Banzai !');" onmouseout="cache_tips();">teste info bulle</a>
<br /><a onclick="overvalme_clic('Freeze 2','Banzai freeze2 !');" onmouseover="overvalme('teste2','Banzai 2!');" onmouseout="cache_tips();">teste info bulle2</a>Le système de Fade fonctionne au poil, exactement comme je veux.
Mais il y a des bug
:La taille de la div n'est pas correctement mise à jour quand on clique.
Après un click, la bulle disparait sitôt que l'on quitte le texte, ou que l'on ne reste pas sur la bande rouge (tester pour voir de quoi je parle, c'est lier a la taille de la div je pense). Ce n'est pas logique vu que la fonction est relivé à la div et non au contenu de la div...
Si je met une taille directement dans le css pour forcer la div a s'ajuster en hauteur, la div disparait quand même si je quitte le texte.
Je sais pas trop quoi faire la... Si quelqu'un peu m'aider.
Merci d'avance.