jQuery effects don't work when I add a speed

Question

I'm pretty new to jQuery (and javascript for that matter), so this is probably just something stupid I'm doing, but it's really annoying me!

All I'm trying to do is add a speed to jQuery's hide and show functions. The code I'm using is:

for (var i in clouds) {
    $(clouds[i]).click(function() {
    $(this).hide();
    });
}

to hide clouds when they're clicked on, and

function fadeLogo(state) { 
    var element=document.getElementById('logo');

    if (state=='home') {
        element.hide;
        element.src='images/home.png';
        element.show;
    }

    else {
        element.hide;
        element.src='images/webNameLogo.png';
        element.show;
    }
}

to hide an image, change it and then show it again. This is called by

onMouseOver=fadeLogo('home') onMouseOut=fadeLogo('logo')

This works fine, but happens instantaneously. Whenever I try to include a speed, either as 'slow', 'fast' or in milliseconds, it won't work, they just stay in their original states. Even adding hide() without a speed throws up an error in Safari's error console:

TypeError: Result of expression 'element.hide' [undefined] is not a function.

No errors are reported for the clouds, they just sit there not doing anything!

Hope someone can help!

Thanks

EDIT:

Now have this for the image change:

$(function() { //This funtion fades the logo to the home button on mouseover

    $('.logo').hover(function() {
        $(this).fadeOut(
            'slow',
            function () {
                $(this).attr ('src','images/home.png').fadeIn('slow');
            });
    }, function() {
        $(this).fadeOut(
            'slow',
            function () {
                $(this).attr('src','images/webNameLogo.png').fadeIn('slow');
            });
    });
});

Which fades the image out and in no problem, but doesn't change between the 2 images... Oops, should have been #logo. Got that one working now, onto the pesky clouds...

Answer 1

The hide() method is used like so:

for (var i in clouds) {
    $(clouds[i]).click(function() {
    $(this).hide( 'slow' ); // or you can pass the milliseconds
    });
}

As for the image hiding you should do something like this:

$( 'selector for your image' ).hide (
    'slow',
    function () {
        $( this ).attr ( 'src', 'images/other.png' ).show ( 'slow' );
    }
);