[Résolu] [jQuery] un bug sur le délais d'affichage d'un tooltip par A_T_J - page 1

edit: problème resolu, j'ajoute la réctification en bas.

bonsoir,

j'essaie de monter un script javascript qui affiche un tooltip. Avec comme fonctionnalités:

si vous survolez le déclencheur alors que le tooltip est entrain de se cacher, vous le ramener a 100% d'opacité.

tout fonctionne bien, mais quand vous survolez le déclencheur plusieurs fois, après un bout de temps les délais se mélangent et le tooltip commence a se désintégrer juste après avoir quitté le déclencheur. (ce qui n'est pas normal puisque je lui demande de rester affiché pendant 2500ms)

voici donc mon code, l'adresse pour tester et une video pour montrer ce qui se passe. merci.

http://tj.abderrahmane.com/tests/tooltip/

http://screenr.com/ehn

var FadingOut,
    trigger = $("#trigger_tooltip"),
    target = $("#target_tooltip");
    
    target.isFadingIn = false;
    target.isFadingOut = false;
    target.isHovered = false;
    
    target.isAnimated = function () {
        return this.isFadingIn || this.isFadingOut;
    }
    
    target.setIsFadingIn = function (){
        this.isFadingIn = true;
    }
    target.setIsFadingOut = function (){
        this.isFadingOut = true;
    }
    target.setIsHovered = function (){
        this.isHovered = true;
    }
    
    target.unsetIsFadingIn = function (){
        this.isFadingIn = false;
    }
    target.unsetIsFadingOut = function (){
        this.isFadingOut = false;
    }
        target.unsetIsHovered = function (){
        this.isHovered = false;
    }
    
    trigger.hover(hoverHandler,houtHandler);
    
    
    
    function hoverHandler(){
        target.setIsHovered();
        if( !target.isAnimated() ){
            if ( target.css("display") == "none" ){
                console.log("hover,!animated: start fadingIn");
                target.setIsFadingIn();
                target.fadeIn(1000,function() {
                    console.log("hover,!animated: animation Stoped");
                    target.unsetIsFadingIn();
                });
            }
        }
        
        if( target.isFadingOut ){
            console.log("hover,fadingOut: > stop fadingOut");
            target.stop()
            clearInterval(FadingOut);
            target.unsetIsFadingOut();
            target.setIsFadingIn();
            console.log("hover,fadingOut: start fadingIn");
            target.animate({"opacity":"1"},10,function() {
                console.log("hover,fadingOut: animation Stoped");
                target.unsetIsFadingIn();
            })
        }
    }
    function houtHandler(){
        target.unsetIsHovered();

        /* ajout de clearInterval(FadingOut); ici */
        
        clearInterval(FadingOut);
        FadingOut = setInterval(function() {
            if( !target.isAnimated() ){
                if( target.css("display") == "block"  && !target.isHovered){
                    console.log("hout,!animated: start fadingOut");
                    target.setIsFadingOut();
                    target.fadeOut(800,function() {
                        console.log("hout,!animated: animation Stoped");
                        target.unsetIsFadingOut();
                        clearInterval(FadingOut);
                    });    
                }
                if( target.isHovered ){
                    clearInterval(FadingOut);
                }
            }
        }, 2500);
    }

[jQuery] un bug sur le délais d'affichage d'un tooltip

[jQuery] un bug sur le délais d'affichage d'un tooltip

Supprimer

Modérer

Signaler le message aux modérateurs