Question

Stick with me on this one. I’m trying to mimick CSS3 transitions and (as an example) I quite liked how the logo came in and did a “bounce” effect on http://metalabdesign.com

I’ve created a quick jsFiddle on how I thought this might work with jQuery animations http://jsfiddle.net/EEtVs/ but am honestly not sure if I should be using jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/ would be the better route here.

I’m more or less looking for the best way to handle easeIn type transitions with jQuery. The route I went in my fiddle is, I’d have to specify a non-JS version for those who don’t have it enabled (I know, EVERYONE should, just sayin) and I’d like it work in all browsers (not just the good ones) which is why I’m going the jQuery route.

But, the issue I’m seeing with my jQuery way is how I have the negative top positioning calculated and how that could effect the actual “transition effect”. If anyone has an idea how I’d create something similar with jQuery easing (or a better way) I’d be very appreciative. I’ve had quite a struggle trying to implement jQuery easing… so really stuck in the mud at the moment. Thanks!

Answer 1

I added the easing plugin to your jsfiddle and then added a new easing type to your .animate() call: http://jsfiddle.net/jasper/EEtVs/1/

I also changed the top value for the element you’re animating because it only needs to be large enough to hide the element on page load.

You can change the easing type by changing ‘easeOutBounce’ to any of the easing types on this page: http://gsgd.co.uk/sandbox/jquery/easing/

If you want to make sure your element is shown in browsers where JavaScript is turned off, run a script in the head of your page that adds a class to the HTML element like this:

$('html').addClass('js');

Now you can make two versions of the CSS for the element you’re bouncing into view:

#heroElement {
    position:relative;
    top:0px;
}
.js #heroElement {
    position:relative;
    top:-60px;
}

This will set the top of the element to the top of the page unless JavaScript is enabled in which case the element will be hidden until the JavaScript runs and shows the element.