jQuery JS no longer works when upgrading from version

Question

When I updated the following JS function from jQuery 1.4.2 to the latest 1.11.2 the className Steam no longer animates.

$(window).load(function(){
    function animSteam(){
        $('<span>',{
            className:'steam'+Math.floor(Math.random()*2 + 1),
            css:{
                marginLeft    : -10 + Math.floor(Math.random()*20)
            }
        }).appendTo('#rocket').animate({
            left:'-=58',
            bottom:'-=100'
        }, 120,function(){
            $(this).remove();
            setTimeout(animSteam,10);
        });
    }
    function moveRocket(){
        $('#rocket').animate({'left':'+=100'},5000).delay(1000)
        .animate({'left':'-=100'},5000,function(){
            setTimeout(moveRocket,1000);
        });
    }
    moveRocket();
    animSteam();
});

This is a cool animation I hate to loose and I'm not sure what function has been deprecated.

Answer 1

Check this out: http://bugs.jquery.com/ticket/9150#comment:1

That was never supported and was coincidental that it worked. The attribute to set is class, not className.

So, it seems what you want is:

    $('<span>',{
        'class': 'steam'+Math.floor(Math.random()*2 + 1),
        css:{
            marginLeft    : -10 + Math.floor(Math.random()*20)
        }
    })

Answer 2

The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.

reference: http://api.jquery.com/jQuery/#jQuery-html-attributes