[Solved] Mouse In/Mouse Out hover effect wont stop flickering?

Is anyone else having an issue with this? I’ve been using this effect on my site for a while now using:

export function picIn (event) {
//Add your code for this event here:
$w( '# pic).show()
$w( '# pic ’ ).hide()
}
export function picOut(event) {
//Add your code for this event here:
$w( '# pic ’ ).hide()
$w( '# pic ’ ).show()

Never had an issue with this until recently. Now, when hovering over an item on the site, instead of just showing the image below as its coded to, the top and bottom image just flash as if I was repeatedly moving my cursor around at speed. I don’t see that it could be an issue with the code, as this has only just started happening and nothing has been changed, plus - this only seems to be happening on the live version of the site for some reason. When I view the site through the preview its fine!

Does anyone know if theres anything I can do to fix this that doesnt involve me having to remove and re-do every single instance of this?

(Side note, as I saw this pointed out when I was searching for an answer - yes, I know hover boxes exist but they don’t offer the exact facility I want. Plus, I have used this code a lot on my site and I would rather not have to re-do them all as hover boxes if I don’t have to!)

Please post the URL and explain how and where to see the problem.

what you are doing now is.

You hover over the image.
the image shows and hides.
if the image hides it means you are going out of the image.
Wich means you trigger the mouse out event.
This event hides - shows the image
again wich triggers the mouse in event again…

And so it keeps going.

Kind regards,
Kristof.

here is an example:

this is what is currently happening on the site (note the flickering). The whole grey circle is .jpg image so the cursor is completely on the image when this is happening.

this is what it should look like and, weirdly, what the preview version of the site does look like.

@meganleeming48 I need the URL in order to assist.

@yisrael-wix the url is juratek(.)com; there are examples of this happening on the top section of the home page!

@meganleeming48 One thing I see is that you have a lot of flagged syntax errors. This might be the cause. Are these errors on new code? Errors are not good. (you can quote me)

@yisrael-wix I set the website this way about a year ago, including the mouse in/mouse out effect. I have not changed the code at all (or anything on that page!) and yet, for a couple of months now, I have been having these issues. That’s why I am so confused. There is no reason that these problems should be happening. If I had changed the code then I could understand why it was happening, but I haven’t done anything to cause them!

@meganleeming48 Wix released a performance release about two months ago. It could be related to that. However, you said that this issue was recent. How recent?

If the code errors were recent, then they could be causing the new performance release to cause the flickering.

I see that when running the site under the old system there is no flickering. But the errors in fact are a problem and need to be fixed. Fixing the errors may actually fix the flickering problem.

@yisrael-wix A few months ago, so probably just prior to the release. As I mentioned, the code hasn’t been edited recently so whatever the code is now has always been the code - and as far as I can remember, I got the code directly from the Wix help site (when it was Corvid). Could you tell me what the errors actually are so that I can try and fix the code?

@meganleeming48 I included a screen shot of some of the errors on my previous post. The errors, which appear from line 6 to line 166 , are on the masterPage.js page which is global code which applies to all site pages. If screen elements in this code are missing from a page or pages, then you will get errors.

@yisrael-wix I have just tried completely re-doing the code on one element just to see what would happen. I removed all the code and properties for that specific element and the re-did it, exactly the same as I have done everytime, and I even copied and pasted the code that was on that element before so it was exactly the same and that one specific element is now working fine.

Because my process, and even the code, was identical to how it was before and that has fixed the problem for that element - I don’t see why this issue has even occured in the first place? The code for every other element is exactly the same, the only thing that changes from element to element is $w( '# THIS TEXT ’ ) which is just the name of the element and it autofilled when you start typing anyway.

I have had issues like this before with Wix, where something will just randomly not work properly but then, when deleted and re-added exactly the same way, it’s fine again! The only thing I can think to try is to delete and re-add everything but that will be a huge job and one which I am looking to avoid…

@meganleeming48 Well, I still see the problem - all of the elements flicker.

I will refer this to QA, but I am sure that they will mention the nearly 100 syntax errors in masterPage.js. These really need to be fixed. The code for the flickering elements aren’t flagged as errors, however their performance might be affected by the presence of the many errors in the code.

@yisrael-wix Thanks for your help anyway! I think I have got rid of all the errors on the masterPage.js but the issue is still there unfortunately.

@meganleeming48 I’ve already sent this to QA for evaluation. Thanks for fixing the errors - it will make the process so much easier. I’ll get back when I hear something.

BTW - From what I see, this is connected to the performance release and it works fine when I run it under the old system. QA will evaluate and make whatever adjustments are needed. I’ll keep you updated.

@yisrael-wix Thank you! I figured it probably would be, given that I only started having the issue around that time.

As Kristof so correctly points out, mouse movement together with the hide causes the events to repeatedly trigger themselves.

You might want to consider using Buttons and configure the regular and hover designs. Or you might want to use the Social Bar element for convenience.