Question

I’m currently using this code to change my page’s css3 background when you hover over a paragraph:

$(function(){
    $('#web').hover( function(){
          $('html').css('background', '#000 url("space-image.png") center center fixed no-repeat');
     });
});

it works fine but I want to add fadIn to it so it will be smoother.
Also, I would like to fade the new background back to the old one when you are not hovering over the paragraph (#web).

Answer 1

You can easily accomplish this by using jQuery and jQuery UI and animate the classes instead of having to animate the individual attributes using SwitchClass.

jQuery:

$(document).ready(function(){
    $("#f1_container").hover(function(){
        $("body").switchClass('load', 'webbg', 100);
    },
    function(){
        $("body").switchClass('webbg', 'load', 100);
    });
});

Just set the style properties for oldClass and newClass in your CSS. (Renaming appropriately)

Make sure that you are loading the jQuery UI library:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

Working example: http://jsfiddle.net/yPBVs/