Home > Developer > JavaScript
Because the requirement is dynamic, I thought it should be a location change. I thought of JQuery I used before, tried all the effects in it, and finally chose animate customization, the Code is as follows:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> testAnimate </title>
<Script type = "text/javascript">
Function changeNum (n) {// n is set to the number you want to change
$ (Function (){
$ ("Counter "). animate ({top: '+ = 20px', opacity: '0'}, "slow", function () {// move the number down and disappear, top is the distance between elements and the top of the page, opacity is the transparency, and the value is 0 ~ 1
Document. getElementById ("counter "). innerHTML = n; // The number changes to n after it disappears. The webpage contains a span element whose id is counter. This code must be placed in animate, otherwise, its value changes before the number disappears.
})
. Animate ({top: '-= 40px'}, "slow") // The number n jumps to the top of the original position.
. Animate ({top: '+ = 20px', opacity: '1'}, "slow"); // The number n appears and falls to the original position of the number, when opacity is 0, the object is completely transparent, that is, the object disappears. When the value is 1, the object is completely displayed.
});
}
</Script>
</Head>
<Body>
<Span id = "counter"> 1 </span>
</Body>
</Html>
I'm just a newbie. I don't understand JQuery's principles, but it's just about achieving the results. I'll write down my ideas. The first time I used a blog, it won't make much effort. please correct me if there are any mistakes. Thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
