I have the followng problem. I try to get a 'plus' (vector image) to turn when you hover it and combined with that to have some text appear. The text appears just fine, however the '+' doesn't turn. What do I do wrong?
export function Plus2_mouseIn(event) { let turnOptions = { "duration": 250, "direction": "right" }; $w("#Plus2").show("turn", turnOptions); $w('#Text1').show(); } export function Plus2_mouseOut(event) { let turnOptions = { "duration": 250, "direction": "left" }; $w("#Plus2").show("turn", turnOptions); $w('#Text1').hide(); }
Hope you can help!
So think about it, your code is for the Plus2 element to be shown when the user puts the mouse over and have the turn effects run when it is shown and yet it is already shown on the page.
Can you set the element to be shown through code when the element is already shown to the user?
On both mouseIn and mouseOut you are trying to get the plus2 element to be shown on your page when the event handler runs.....
Read the effect options section as you can only do it if you use show and hide, which only works itself if you have the element hidden in the first place for it be be shown.
https://www.wix.com/corvid/reference/$w.EffectOptions.html#TurnEffectOptions
TurnEffectOptions
An object used to customize the "turn" effect.
Description
The TurnEffectOptions object is used for the effectOptions parameter when calling the show() and hide() functions with the "turn" effect.
Simple option to this would be to have a duplicate plus element that is shown when the user moves the mouse in so that it appears and turns etc, Then on the mouse out event, simply have the plus duplicate turn and hide again leaving the existing plus 2 element as it is.
Or do simple idea as your page looks like it is in mono only, of just having white circle with black frame that changes to full black circle when the mouse is moved in and text appears and then changed back to white circle with black frame when the text is hidden again.
You can go more detailed and do lines from the circle to the text too, however that would have to be adjusted for desktop, tablet and mobile views so that they always lined up with the circles and text etc.
How can the user do mouseIn on the plus2 element if it is not there in the first place?
You have it to show when the user moves the mouse over it, yet how does the user know if it is there if it is hidden?
Have a read of the HiddenMixin section from the Wix API Reference.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html