I'm pretty new to client side scripting and I'm still learning. I've written this JS plugin which animates blocks of HTML (fade-in from left/top/right/bottom) as you scroll down the page. Everything seems to be works correctly, but was just wondering if there is anyone who could suggest how I can improve on this? e.g: - Reduce the size of the code. - Structure the plugin better. - Stop repetitive code. - Increase browser compatibility. - Make better use of jQuery keywords. Really, just doing the same thing, but, written better! CSS: ``` body { height: 100%; overflow-x: hidden; } .animate { position: relative; } .bg-info { padding: 10px; text-align: center; } ``` HTML: ``` Nulla vel varius dolor. In pellentesque mi ac congue pulvinar. Sed cursus tincidunt condimentum. Curabitur vel velit leo. Nulla condimentum dolor dui, nec convallis elit congue eu. Nulla vel varius dolor. In pellentesque mi ac congue pulvinar. Sed cursus tincidunt condimentum. Curabitur vel velit leo. Nulla condimentum dolor dui, nec convallis elit congue eu. Nulla vel varius dolor. In pellentesque mi ac congue pulvinar. Sed cursus tincidunt condimentum. Curabitur vel velit leo. Nulla condimentum dolor dui, nec convallis elit congue eu. Nulla vel varius dolor. In pellentesque mi ac congue pulvinar. Sed cursus tincidunt condimentum. Curabitur vel velit leo. Nulla condimentum dolor dui, nec convallis elit congue eu. ``` JavaScript: ``` (function ($) { $.fn.animateSliders = function(options) { var style = { opacity: "0", "-ms-opacity": "0" }; var settings = $.extend({ offset: 80, distance : 200, animation: "left", easing: "easeInOutBack", speed: 1000, delay: 0 }, options); $(".animate").each(function () {

I have this script that moves a box around the screen and the loops the second part of the movement. I have altered the code to drop another three boxes (4 in total) into the animation so the boxes follow each other around the screen. I want it to work exactly like it does, but I'm sure there's a much better way of doing this: Here's a js fiddle: http://jsfiddle.net/NF6LU/ JS ``` function animateNode() { $('.node').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node2').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node3').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node4').animate({top: '425px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node2').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node3').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node4').animate({marginLeft: '-284px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node2').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node3').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node4').animate({top: '157px'}, { duration: 1800, easing : 'linear', queue: true }); $('.node').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node2').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node3').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true }); $('.node4').animate({marginLeft: '264px'}, { duration: 2500, easing : 'linear', queue: true }); } $('.node').delay(1500).animate({top: '157p

Having fancy animations in WPF is quite nice so I tried to implement a generic fading animation for `UIElements` which I use for the Popups in my application. I was wondering if there was anything wrong with it, and thought about posting it here yesterday. There were indeed many things wrong at that time and I have improved the code greatly since then (I think) but there probably are still some issues with it now. One of the first flaws I came across was that by temporarily changing the `RenderTransform` the original can get messed up if the same animation is started while another one is still playing because the `Completed` event of he first would never be called and the original `RenderTransform` is merged with a half-animated transform that comes from my disrupted animation. To prevent this I now have a `HashSet` which is checked for the `UIElement` in question and no animation will be started if another one is still in progress, not sure if that is the best approach here. ``` namespace HB.Animation { public enum Direction { Up, Down, Left, Right } public enum AnimationType { In, Out } public abstract class UIElementAnimationBase { private static readonly HashSet _animatedElements = new HashSet(); private AnimationType _type = AnimationType.In; /// /// Gets or sets the type of the animation. Default is In. /// public AnimationType Type { get { return _type; } set { _type = value; } } private UIElement _target = null; /// /// Gets or sets the target of the animation. /// public UIElement Target { get { return _target; } set { _target = value; } } private TimeSpan _duration = TimeSpan.FromSeconds(0.3); /// /// Gets or sets the duration of the animation. Default is 0.3 seconds. /// public TimeSpan Duration { get {

Animations feel either too mechanical (linear easing) or too bouncy (default spring), and it is unclear when to use each transition type.