[solved] Developing slider(flickering problem)

xmen · by **xmen** on Fri Oct 09, 2009 6:48 am

I've a div on right side of page, so I want when I hover mouse on it. It should get expand. So I coded like this

Line number On/Off | Expand/Contract | Select all

        function onHover() {
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            var myEffects = new Fx.Styles('containerMailDiv', { duration: slideDuration, transition: Fx.Transitions.linear });
            myEffects.custom({
                'width': [curr_width, 100],
                'opacity': [0, 1]
            });
        }
        
        function onOut() {
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            var myEffects = new Fx.Styles('containerMailDiv', { duration: slideDuration, transition: Fx.Transitions.linear });
            myEffects.custom({
                'width': [100, 20]
            });
        }

now when I over mouse on it, It flicks too much...

any help ?

wowenkho · by **wowenkho** on Fri Oct 09, 2009 6:56 am

moved to MooTools 1.1 Help, since it apparently uses MooTools 1.1 classes.

i think the reason why you've got your animation flicker like crazy is because your 2 Fx.Styles declarations fight themselves out over a single element. good practice when it comes to these kinds of stuff is to declare just a single Fx.Styles class instance outside of those functions and manipulating that single instance instead. also, another thing you could try is to add the option "link":"cancel" or "wait":false in the Fx.Styles instance.

xmen · by **xmen** on Fri Oct 09, 2009 11:34 am

Okay, I tried to declare it above functions but Im getting null error.

like this

Line number On/Off | Expand/Contract | Select all

 var myEffects = new Fx.Styles('containerMailDiv', { link: "cancel", wait: false, duration: slideDuration, transition: Fx.Transitions.linear });
        function onHover() {
            clearInterval(interValID);
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            
            myEffects.custom({
                'width': [curr_width, 100],
                'opacity': [0, 1]
            });
        }
 
        function onOut() {
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            
            myEffects.custom({
                'width': [100, 20]
            });
        }

so I tried this

Line number On/Off | Expand/Contract | Select all

        function onHover() {
 
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            var myEffects = new Fx.Styles('containerMailDiv', { link: "cancel", wait: false, duration: slideDuration, transition: Fx.Transitions.linear });
            myEffects.custom({
                'width': [curr_width, 100],
                'opacity': [0, 1]
            });
        }
 
        function onOut() {
            var divS = document.getElementById("containerMailDiv");
            var curr_width = parseInt(divS.style.width);
            var myEffects = new Fx.Styles('containerMailDiv', { link: "cancel", wait: false, duration: slideDuration, transition: Fx.Transitions.linear });
            myEffects.custom({
                'width': [100, 20]
            });
        }

it works sometimes good onOver but never in onOut

xmen · by **xmen** on Fri Oct 09, 2009 5:29 pm

Okay, I get it working...Simply checking div width before doing animation

[solved] Developing slider(flickering problem)

[solved] Developing slider(flickering problem)

Re: Developing slider(flickering problem)

Re: Developing slider(flickering problem)

Re: Developing slider(flickering problem)

Who is online