Question

I have an existing function whereby the background image of a vertical site changes when a nav-menu item is clicked.

<script type="text/javascript">
$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
    return false;
    });
});

I can’t figure out how to bind an animation to this function so that the new background image fades in…right now it’s a harsh, instantaneous changeover. I want the effects of

$("#bgimg").fadeIn(1500);

…but am a little new to javascript/jquery.

Answer 1

Enclose your image in a div, then apply the effect to the div, like so:

HTML:

<div><img id="bgimg" src="...."></div>

JAVASCRIPT:

$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").parent().fadeOut(1000, function() {
        $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
        $(this).fadeIn(1000); 
    });   
    return false;
    });
});