This example is similar to the previous one in the Calling C++ functions from JavaScript section. Once we have included the WebChannel JavaScript library and initiated the QWebChannel class, we can call any of the JavaScript functions from C++ by calling webview->page()->runJavascript("jsFunctionNameHere();"). Don't forget to apply the web channel created in C++ to the WebView's page as well; otherwise, it will not be able to communicate with the QWebChannel class in your HTML file.

By default, we change the CSS properties of the penguin image and set its opacity to 0, width to 0%, and height to 0%. We also hide the two list groups by calling the hide() jQuery function. When the Play UI Animation button is clicked, we repeat the steps again just in case the animations have been played before (that is, the same button has been clicked before), then we hide them again in order for the animations to be replayed.

One powerful feature of jQuery is that you can define what happens after an animation finishes, which allows us to play the animations in sequence. In this example, we started with the penguin image and interpolated its CSS properties to a targeted setting within a second (1,000 milliseconds). Once that's done, we start another animation, which makes the first list group slide from top to bottom in one second. After that, we run the third animation, which makes the second list group fade in from nowhere within 1.5 seconds.

To replace the information text located in the top panel, we created a JavaScript function called changeHtmlText(); within the function itself, and we got the HTML element by referring to its ID and calling html() to change its contents.