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!
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
Hi! The plus2 element is visible, the text isn’t. The text appears when the mouse goes over it, but the plus doesn’t turn.
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.
Have a look at this tutorial from Yisrael that you can open in your own editor already setup, as I think that it will help you out here, although note that the code runs the opposite way around, it will hide first and then show, so you have to reverse your effects etc.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-wix-animations
Plus, you could also do something like this, in reference to my lines suggestion.
https://www.wix.com/corvid/example/callout-and-highlight
@givemeawhisky Thanks, I will look at your suggestions!
@givemeawhisky I must be a complete idiot, but why is the first part working well (mouseIn) but the mouseOut not? So, when I do mouse in I get the turned duplicate ‘+’, but when I move the mouse out the turned ‘+’ stays and nothing happens.
export function plusN_mouseIn(event) {
$w(‘#plusN’).hide();
$w(‘#vectorImage7’).show();
}
export function plusN_mouseOut(event) {
$w(‘#vectorImage7’).hide();
$w(‘#plusN’).show();
}
Got it! Added a transparant box with the mouseIn and out, problem solved. Learning by doing 
