Using Modernizr and Jquery to Animate If CSS3 Transitions Don't Exist

Using Modernizr and jQuery to Animate if CSS3 Transitions Don't Exist

Solved this myself. The way I did was like this

<!doctype html>
<html>
    <head>
        <title>Modernizr + jQuery Testing</title>
        <script type="text/javascript" src="modernizr.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
            $(function() {
                $('#js').hover(function(){
                    $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
                }, function(){
                    $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
                });
            });
        }
        </script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            div {
                border: 1px solid red;
                height: 100px;
                margin: 25px auto;
                width: 100px;
            }
            #css {
                transition: height .5s, width .5s;
                -khtml-transition: height .5s, width .5s;
                -moz-transition: height .5s, width .5s;
                -o-transition: height .5s, width .5s;
                -webkit-transition: height .5s, width .5s;
            }
            #css:hover {
                height: 50px;
                width: 50px;
            }
        </style>
    </head>

    <body>
        <div id="js">
            JS
        </div>
        <div id="css">
            CSS
        </div>
    </body>
</html>

That worked perfectly. The CSS one only animates in new browsers (because that's the only place it can) and the JS one only animates in old browsers. If you use this script, you can get modernizr from http://www.modernizr.com/ and jQuery from http://www.jquery.com/ (of course).

CSS3/Javascript: Transitions IE support using jQuery/Modernizr

Your problem is this line:

$(this).animate({margin-top:'5px'},{queue:false,duration:500});

You'll either need to quote the CSS value or use camelcase:

$(this).animate({marginTop:'5px'},{queue:false,duration:500});
$(this).animate({'margin-top':'5px'},{queue:false,duration:500});

This pretty much applies to all CSS values with hyphens etc.

JQuery or Modernizr is not working in IE and other legacy browsers?

Your odd() function (Line 62 in menu.html) has an extra comma:

function odd() {
    $('.content').animate({
        marginLeft : '20%',
        marginRight : '-20%', // <-- bad comma
    });
}

Next time just open your demo in Internet Explorer (or whatever browser is giving you problems), and hit F12 (dev tools). IE lets you switch the browser version you wish to view the page in, so if your in IE, then in dev tools set the 'browser mode' to IE7, then open the console, and inspect your errors.

How to use jQuery to wait for the end of CSS3 transitions?

For transitions you can use the following to detect the end of a transition via jQuery:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla has an excellent reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

For animations it's very similar:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Note that you can pass all of the browser prefixed event strings into the bind() method simultaneously to support the event firing on all browsers that support it.

Update:

Per the comment left by Duck: you use jQuery's .one() method to ensure the handler only fires once. For example:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Update 2:

jQuery bind() method has been deprecated, and on() method is preferred as of jQuery 1.7. bind()

You can also use off() method on the callback function to ensure it will be fired only once. Here is an example which is equivalent to using one() method:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

References:

.off()
.one()

jQuery fallback for this css3 animation on ie9

Take a look at this example DEMO

Credits go to the author of the script.

HTML

<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />
<img src="http://healingaia.com/img/nb-petal-detox.png" />

CSS

body {overflow:hidden;}

img {
 display:block;
 margin:10px auto 0px;
 position:relative;    
}

jQuery

$(function() {
    $('img').hover(function() {
        $(this).stop().animate({
            width:'472px',
            height:'246px',
            marginTop:'-118px',
            bottom:'-59px',
        }, 1000, "easeOutBack");
    }, function() {
        $(this).stop().animate({
            width:'236px',
            height:'123px',
            marginTop:'0px',
            bottom:'0px'
        }, 700, "easeOutBounce");
    });
});

jQuery Pugin or CSS3

You should follow a progressive enhancement methodology.

Add css on top of your html for things css can do. e.g. rounded corners etc.
then add jquery stuff on top for only things jquery can do.
And then use jquery to change css3 to improve UX.

This means with javascript turned off you still get the cool css3 features.

Another consideration is that you should use feature detection and not browser testing to fork you code to create cross browser code. There are some articles on alistapart and on the web about feature detection.

Smooth out this jQuery toggle animation?

Andrew's solution is correct, but I would still put the css like this (if javascript is off):
.videoblock{width:560px; height: 315px; overflow:hidden}

and add the simultaneous animation:

$('.videoblock').css('height','0');
$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {

        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").animate({height: "0"}, { duration: 400, queue: false });
        $content.animate({height: "315"}, { duration: 400, queue: false });
    }
});

Here is the link to the final: http://jsfiddle.net/gwLcD/21/

Detecting slow hardware/slow browsers with JavaScript

This is by no means sufficient to detect a slow system, but would minimize the impact on the users of such systems:

Use CSS transitions and trigger them with jQuery (by toggling classes as needed), offloading element animations to the rendering engine so that functional responsiveness of the page would not suffer at least.

Use the correct CSS properties. For instance, rather than animating top:10px;left:10px; properties, use a CSS transform transform: translateX(10px) translateY(10px) which will be more efficient.

Trigger hardware (GPU) acceleration by adding transform: translate3d(0,0,0); or a similar workaround to the target element.

If you're absolutely attached to animations, or need to trigger fallback functionality (hide/show/reposition elements) without CSS for some reason, you could try a Modernizr workaround:

if(!Modernizr.csstransitions) {
  /*fallback logic*/
}

Using Modernizr and Jquery to Animate If CSS3 Transitions Don't Exist