Triggering animation in circle counter and numbers modules when showing div after previously being hidden (Divi/WordPress)

这一生的挚爱 提交于 2021-02-11 12:18:05

问题


Divi is a theme built by Elegant Themes. This theme provides modules for use in building pages within WordPress, some of which includes built-in animations.

The modules relevant to my question is the circle counter and the numbers counter modules.

When scrolling those modules into view, they animate.

I have a row with those two modules. As soon as the page loads, that row is hidden by jQuery (which is desired behavior). However on clicking a link, the row is to be shown. When the row is shown, the circle counter and numbers counter do not appear.

I suspect this is because when the row is immediately hidden on page load via .hide();, it results in any JavaScript associated with those modules within that row not executing. Once the row is shown, due to the page having already loaded, the JavaScript code associated with those modules simply do not fire.

The reason why I have it hidden is because I built a tab container. I have four rows; the first contains three text modules with specific IDs assigned to each text module. Each of the last three rows have the same modules with the values being different for each row. When one text (aka tab) is clicked, the row relevant to that tab will be shown while the other two rows are hidden.

I tried using visibility: visible; instead of using .hide(); and .show();, as that'd mean the code would still be within the DOM so any JavaScript code associated with them would fire. I quickly found out that with it being visible, it meant it'd still take up space structurally in the page and simply not be visible. So it was clear to me that this wasn't an option.

I searched Stack Overflow and could only find one other post similar to my situation: trigger built-in javascript animations provided by Divi theme when content becomes visible in the browser

Except in my case, I don't need to pass new values to the modules. I just want them to show and re-animate when the row containing them is shown via .show();.

来源:https://stackoverflow.com/questions/65729660/triggering-animation-in-circle-counter-and-numbers-modules-when-showing-div-afte

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!