2

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!

Jasper
  • 75,717
  • 14
  • 151
  • 146
Zach
  • 1,185
  • 3
  • 24
  • 60
  • [jQuery's animate method](http://api.jquery.com/animate/) takes an optional `easing` parameter. Or am I not understanding your question? If you use jQuery-ui, you get access to [many, many more](http://jqueryui.com/demos/effect/easing.html) easing functions. – btleffler Nov 11 '11 at 17:25
  • Hi @btleffler I'm more or less trying to figure out if me putting in things like `position:relative;top:-200px;` for an easing effect is completely stupid or not ;) Was assuming if jQuery easing was enabled, there'd be that "flicker" of the element showing up before it was hidden by JS and then shown again by that same JS. Tryinig to come up with the best/most logical user experience here... maybe that's contradictory compared to fading in anything anyways... but dammit I think it would be cool! ha – Zach Nov 11 '11 at 17:28
  • If you want to hide things initially, there's no reason to not use `display: hidden` in your CSS. If the user doesn't have Javascript enabled, you can use the ` – btleffler Nov 11 '11 at 17:32

1 Answers1

0

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.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Hi @Jasper okay, it sounds like if I want to mimick that initial fade-in/bounce like on MetaLab, using position:relative with a negative top position (with a non-js fallback) and jQuery easing animations is my best bet. Thanks for your help! – Zach Nov 11 '11 at 17:37
  • Check-out my edit about adding a class to the HTML tag with JavaScript to differentiate between JS version and the non-JS version. – Jasper Nov 11 '11 at 17:38
  • Hi @Jasper - yes, definitely very useful. I usually use Twitter's Bootstrap with some HTML5 Boilerplate thrown in there (they use Modernizr), so I think this is a good direction. Thanks again very much! – Zach Nov 11 '11 at 17:39
  • I was going to direct you to Modernizr but I figured in this instance it's pretty easy to do it yourself. – Jasper Nov 11 '11 at 17:40