How to change speed for SlideIn and SlideOut

Ask the community
,
1

Code Below
I want to increase the speed of the events mouse in and mouse out but cant seem to figure out how to use ‘Options’ to adjust the ‘duration’

$w.onReady(function () {

}
);

export function text3_mouseIn(event) {
$w(“#A”).show(“SlideIn”);
}

export function text3_mouseOut(event

2 
let durationInMilliseconds = 800;
export function text3_mouseIn(event) {
	$w("#A").show("slide", {duration: durationInMilliseconds , direction:"left"});
}
3

could not find ‘left’ error

770×150 7.42 KB

4

$w . onReady ( function () {

});

let durationInMilliseconds = 800 ;

export function button1_mouseIn ( event ) {

  $w ( "#box1" ). show ( "slide" , { duration :  durationInMilliseconds  ,  direction : left });

}
export function button1_mouseOut ( event ) {
$w ( “#box1” ). hide ( “slide” ,{ duration : durationInMilliseconds , direction : left });
}

5

Update: I have removed the “, direction:left” and the code seems to be running now, however, it seems to be glitching out. I have published into a test site: HOME | My Site 2 (wixsite.com)

Original effect: IDEO is a global design and innovation company | ideo.com

6

Please ignore the position of the mouse cursor it is an error of my recording software, you can imagine it being triggered once over the button, but sometimes does not trigger the disappear animation once out of text area

7

HOME | My Site 2 (wixsite.com)
Site works well but there seems to an issue with responsiveness, All 3 buttons can be triggered even when the mouse is out of range in all ( trying running the mouse cursor from buttons LEFT → RIGHT)
you should see all buttons in the mouseInEvent mode.

8

@gokul1311 it should be “left” in quotes . (or “right”, “top”, “bottom” whatever direction you wish).

let durationInMilliseconds = 800;
export function text3_mouseIn(event) {
	$w("#A").show("slide", {duration: durationInMilliseconds , direction:"left"});
}
9

The reason the slider doesn’t works onMouseOut
is because the slide in isn’t done yet.

I kinda made a work around but its not the most easy way.
You have to check if you went out earlyer or not.

here is the sample code.

let duration = 1000 //global duration
let btn1Time, btn2Time, btn3Time; //to hold the time when you used mouseOut

let slideOptions = {
    duration: duration,
    direction: "left"
}
export function button1_mouseIn(event) {
    $w("#vectorImage1").show("slide", slideOptions)
        .then(() => { //this is triggerd after the slide is done
            let newTime = new Date().getTime() //get new time
            let timeDifference = newTime - btn1Time //check the time between mouseOut and when the show("slide") ended.
            if ( timeDifference < duration) {  // if the timeDifference < then the duration, then hide start the hide("slide")
                console.log("btnTime difference",(newTime - btn1Time))
                $w("#vectorImage1").hide("slide", slideOptions)
            }
            If the difference is bigger then the duration, then it means the mouseOut will have triggerd after the show("slide") is done, so no need to do it again.

        })
}

export function button1_mouseOut(event) {

    btn1Time = new Date().getTime() //add the mouseOut time to a variable
        
    $w("#vectorImage1").hide("slide", slideOptions) //This will only run when the show("slide") has finished
}

Kind regards,
Kristof