In the previous blog post, I shared the source code for a corporate website. In this post, I will provide some additional information about Jquery. Jquery is a lightweight JavaScript framework similar to Protype, and it is loved by many programmers, including CG. Of course, using Jquery to create dynamic effects is a piece of cake. Below are some simple dynamic effects implemented by CG using Jquery. Don't worry, the JavaScript code is not complicated.
Here is the demonstration link: http://www.lidaren.com/code/Jquery/Jquery1.htm
Below is the source code:
$(document).ready(function(){
$("#box").animate({opacity: "0.1", left: "+=600"}, 1200)
.animate({opacity: "1", top: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", left: "0", height: "170", width: "300"}, "slow")
.animate({opacity: "1", top: "0"}, "fast")
.animate({opacity: "1", top: "+=150", left: "+=300", height: "170", width: "300"}, "slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
.slideUp()
.slideDown("slow")
.animate({opacity: "0.1", height: "170", width: "300"}, "slow")
.animate({opacity: "1" , height: "170", width: "300"}, "slow")
.animate({opacity: "0.4", height: "170", width: "300"}, "slow")
.animate({opacity: "1", height: "170", width: "300"}, "slow")
return false;
});
Let me explain briefly. Jquery achieves dynamic effects on DOM objects by defining the animate method for objects. The animate method has multiple parameters. The first parameter is the basic property change value from state A to state B, usually compatible with CSS. Jquery supports expression calculation, for example, height: "+=300" means increasing the height by 300. This way of coding is very convenient. The second parameter usually controls the effect of the change, and the available values are fast and slow. Of course, you can also use an integer to represent the duration of the change, which gives you more control. The .slideUp() and .slideDown() methods are scroll effects, and the parameters can be fast, slow, or a time control in milliseconds. There are also .hide() and .show() methods, which are self-explanatory. I won't go into detail here.