Fade in background with jQuery on hover then fade out

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 use jQuery animate() to animate css changes over time.

[EDIT]

Your code should use something like:

$(function() {
    $('#web').hover( function() {
        $('html').animate({
            background: #000 url("space-image.png") center center fixed no-repeat
        }, 5000, 
        function() {
            // Animation complete.
        });
    });
});

Example code from api.jquery.com/animate :

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 2

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/

Answer 3

$('#web').hover( 
    function() { $("#myOverlay").fadeIn(); }, 
    function() { $("#myOverlay").fadeOut(); }
});

I don't think you can fade the background, there is nothing under it. You would need an overlay.

Answer 4

<script>
$(document).ready(function(){
$("#f1_container").hover(function(){
$("body").switchClass('load', 'webbg', 950);
},
function(){
$("body").switchClass('webbg', 'load', 950);
});
});
</script>
<script>
$(document).ready(function(){
$("#f1_container2").hover(function(){
$("body").switchClass('load', 'photobg', 950);
},
function(){
$("body").switchClass('photobg', 'load', 950);
});
});
</script>

That is the solution I'll use. Thanks for the help.