Here i will explain how to move or bounce a particular division by using jquery.
Here i will use .velocity() function instead of $.animate() animation engine.
Velocity is a animation engine that re-implements jQuery's $.animate() for better performance (making Velocity also faster than CSS animation libraries) while including new features to improve workflow.
- Download Velocity include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile.
- Example:
- Default.aspx
- Here I Take Some Asp controls in a single div and add a button to start the animation.
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <link rel="stylesheet" href="Css/style2.css" media="screen" type="text/css" />
- </head>
- <body >
- <form id="form1" runat="server">
- <div style="background-color: #0099FF">
- <asp:DropDownList ID="DropDownList1" runat="server">
- </asp:DropDownList>
- <asp:DropDownList ID="DropDownList2" runat="server">
- </asp:DropDownList>
- <asp:DropDownList ID="DropDownList3" runat="server">
- </asp:DropDownList>
- <asp:DropDownList ID="DropDownList4" runat="server">
- </asp:DropDownList>
- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
- <br />
- </div>
- <asp:Button ID="Button1" runat="server" Text="Button" Height="78px" Width="157px" />
- <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
- <script src='http://julian.com/research/velocity/build/jquery.velocity.min.js'>
- </script>
- <script src='http://julian.com/research/velocity/build/velocity.ui.js'></script>
- <script src="js/index.js"></script>
- </form>
- </body>
- </html>
- Index.js
- Here i add the jquery file to animate the div
- $("div").velocity("transition.bounceLeftIn");
- (
- {
- scale: 0
- },
- {
- duration: 800,
- display: "none"
- });
0 comments::
Post a Comment