trigger built-in javascript animations provided by Divi theme when content becomes visible in the browser

问题

I build WordPress sites using the Divi theme from Elegant Themes.

This theme provides a lot of visual modules to build your pages, and some of these modules have built-in animations.

For instance, the circle counter module displays a number with an animated circle around it, a percentage of the circle being colored based on the number displayed within the circle.

The animation plays when you scroll the page and when the circle counter module becomes visible in the browser.

I would like to know if I can use the browser development tools, and how, to find out how the animation is played, so I can trigger it whenever I want from my own scripts.

I also have access to the source code of the theme, but I don't know how to start to find what I am looking for.

And Divi support says "I am afraid that this feature is not supported. It would require customization which goes beyond the level of support that we can provide here.", so this is why I am here.

回答1:

The circle version below will update during page load but the gauge doesn't adjust after that - only the number value changes. Passing a 'newval' to a progress bar will step up or down as necessary.

$(".et_pb_circle_counter_0").animate({
'data-width': newval
},{
duration: 1000,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_circle_counter_0 .et_pb_circle_counter_inner").attr("data-number-value", newval );
$(".et_pb_circle_counter_0 span.percent-value").html( Math.ceil(now) );
}
});

// Progress Bars
$(".et_pb_counter_0 span.et_pb_counter_amount").animate({
width: newval+"%"
},{
duration: 1500,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_counter_0 span.et_pb_counter_amount").attr("data-width", Math.ceil(now)  + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").attr("data-width", Math.ceil(now) + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").html(Math.ceil(now) + "%");
}

});

来源：https://stackoverflow.com/questions/58815848/trigger-built-in-javascript-animations-provided-by-divi-theme-when-content-becom

标签

animation