Did you know FaceySpacey is the creator of Redux-First Router and Universal?
The Startup Incubator.
Your one stop social media shop
Resource Categories:
Technical
Non-Technical
Refer A Friend
Popular Articles
DEVELOPMENT TOOLS 1 - VERSION CONTROL (Mercurial)
CONTRACTING 2 - TOP 10 EASY SITE CREATOR TOOLS
Subscribe
JQUERY 2 - ANIMATION WITH JQUERY
Animation is often one of the most intriguing things about client side coders that new Javascript/jQuery developers always want to jump to. So lets do it.
CSS:
.myDiv {position: relative; left: 10px; width:100px; font-size: 12px;}
HTML:
<div class=”myDiv” />Some text...</div>
JQUERY:
$(".myDiv").animate({left: 500, fontSize: 36}, 5000, function() { alert("animation is complete!") });
So basically what that does is move “.myDiv” by 500 pixels from the left. “left” is a standard CSS positioning property. Notice that myDiv is positioned 10 pixels from the left in the initial CSS rules. And the font size grows from 12px to 36px.
So obviously the animate() method is doing all the work here. It’s applied to the elements selected by the $(“.myDiv”) selector, which in this case is just one element, but it could move multiple elements at the same time. It receives several parameters which configures exactly how it will animate. The first parameter is a list of CSS properties to “tween” style animate from their current settings to what’s written in here.
The “5000” in the second parameter saying how long the animation should take to move those 490 pixels (i.e. from 10 pixels from the left to 500 pixels from the left).
The 3rd parameter is a function that is called at the end of the animation, which in this case will simply alert you that the “animation is complete!”
Now that’s the end of the tutorial, but lets look at how all the components truly look on a web page. I left out some required syntax that is really easy to remember--because it’s required and you’ll use it a lot--but wasn’t conducive to learning the main topics. Often when learning programming, they’ll flood you with tons of syntax and then get to the main topics, and it’s hard to know what you should be focusing on...So now that you got the main concepts, let’s look at the required syntax this is missing:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <style type="text/css"> .myDiv {position: relative; left: 10px; width:100px; height: 25px; font-size: 12px;} </style> </head> <body> <div class="myDiv">Some text...</div> <script type="text/javascript"> $(document).ready(function() { $(".myDiv").animate({ left: 500, fontSize: 36 }, 5000, function() { alert("animation is complete!") }); }); </script> </body> </html>
So notice the <script> tags that wrap the jQuery, and that also embed the jQuery framework at the top. Notice how the CSS is similarly wrapped, but in <style> elements. And notice how the page is wrapped in <html> tags, and how it’s separated into 2 parts: <head> and <body>. The <head> is where you declare a bunch of meta data and generally where you enter helper tools like the jQuery framework etc.
SMM 3 - FORMULA TO FIND INFLUENCERS