Hi there, I’m currently working on a client site, and I want to add some hover interactions for MouseIn and Mouseout. I basically want to achieve a float animation of complimentary info when user hovers on a containerbox. While everything seems to work accordingly. I can’t manage to make the complimentary info to efficiently. If I quickly hover on a different container the information seems to dissappear not living room for other containers to show.
Here's the code I'm adding to make this work:
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
export function beginnersLesson_mouseIn(event) {
//Add your code for this event here:
$w("#indepenPlus").hide();
$w("#independentText").hide();
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#beginnersText").show("float", floatOptions);
$w("#lessonsText").show("float", floatOptions);
}
export function beginnersLesson_mouseOut(event) {
//Add your code for this event here:
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float", floatOptions);
}
export function independentRider_mouseIn(event) {
//Add your code for this event here:
$w("#indepenPlus").hide();
$w("#beginnersText").hide();
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").show("float", floatOptions);
$w("#independentText").show("float", floatOptions);
}
export function independentRider_mouseOut(event) {
//Add your code for this event here:
let floatOptions = {
"duration": 200,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float", floatOptions);
$w("#independentText").hide("float", floatOptions);
$w("#beginnersText").hide();
$w("#indepenPlus").hide();
}
export function indepenBox_mouseOut(event) {
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float",floatOptions);
$w("#indepenPlus").hide();
}
export function indepenBox_mouseIn(event) {
//Add your code for this event here:
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").show("float", floatOptions);
$w("#independentText").hide();
$w("#beginnersText").hide();
$w("#indepenPlus").show("float", floatOptions);
}
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.formFactor === "Mobile") {
$w("#mobileSlider").show();
$w("#viewMobilebtn").show();
}
});
I hope my request is not super confusing. You can test it in the lessons info-boxes on the following link:
https://israelgil90.wixsite.com/kiteboardingbonaire/lessons/
When I test it, it works fine. However there might be an issue on some devices when you switch quickly. you might tell the element to ‘show’ again while it hasn’t executed the ‘hide‘ command yet. ‘ Hide’ then comes after ‘show’ and nothing appears. You can solve this with an array of promises that is declared globally (at the top of the code before any function)
var animations = []
Then whenever you hide an element, add it as a promise to the array. Change ‘this element’ to the one you’re hiding eg $w(‘#beginnerstext) etc.
animations.push(new Promise(function(res, rej){thiselement.hide().then(()=>{resolve(“success”)})}))
Then when you show an element such as $w(‘#lessonstext) you first resolve all promises
Promise.all(animations).then(()=>{thiselement.show(“float”, floatoptions)})
I am not sure if I got all the brackets right but this is the general idea. If you need more info on promises you can do a search on google for ‘promises javascript’. Same for arrays.
You also don’t need the additional onReady towards the end of your code and imports should be at the top.
You can also put the effect option into the code line itself to save you having to have multiple lines of code for it. It should look something like this for your #independentText element.
$w('#independentText').hide('float',{"duration": 500, "delay": 0, "direction": "top"});
Code for the page should be something like this below, without adjusting the options code or adding any promises as Verbal mentioned above (this will always be an issue with Wix and the onMouse event if users move to quickly).
Wix have a page about using asynchronous code and promises that you can read here.
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.formFactor === "Mobile") {
$w("#mobileSlider").show();
$w("#viewMobilebtn").show();
}
});
export function beginnersLesson_mouseIn(event) {
//Add your code for this event here:
$w("#indepenPlus").hide();
$w("#independentText").hide();
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#beginnersText").show("float", floatOptions);
$w("#lessonsText").show("float", floatOptions);
}
export function beginnersLesson_mouseOut(event) {
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float", floatOptions);
}
export function independentRider_mouseIn(event) {
$w("#indepenPlus").hide();
$w("#beginnersText").hide();
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").show("float", floatOptions);
$w("#independentText").show("float", floatOptions);
}
export function independentRider_mouseOut(event) {
let floatOptions = {
"duration": 200,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float", floatOptions);
$w("#independentText").hide("float", floatOptions);
$w("#beginnersText").hide();
$w("#indepenPlus").hide();
}
export function indepenBox_mouseOut(event) {
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").hide("float", floatOptions);
$w("#indepenPlus").hide();
}
export function indepenBox_mouseIn(event) {
let floatOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
};
$w("#lessonsText").show("float", floatOptions);
$w("#independentText").hide();
$w("#beginnersText").hide();
$w("#indepenPlus").show("float", floatOptions);
}
Hi first thanks for your comments. Even though I understand fully what you mean. I’m trying to apply it to the code and nothing seems to change. Not quite sure where I should add the promise.
Can you give me a bit of an example on the code? I’d highly appreciate it.
Hi Israel, I don’t really have the time to rewrite your code for you unfortunately. Perhaps someone else is willing to do it. It would probably help a lot of people to have a clear example of a solution to the problem you describe. As a temporary solution, you could also show&hide the element without the floating effect, or any other effect or delay. That will probably solve it as well. Blessings, Michiel
@verbaldancing I’ve done that for now thanks. The solution is exactly as you describe, i’m sure promises will fix it but my syntax knowledge of Js is very limited. Thanks though for all your help, super appreciate it!