Why do images need to be surrounded in div/span elements for effects to work properly?

I don't particularly understand why an image would work in a span, but not by itself.

See complete example here.

JS

 $(document).ready(
     function ()
     {
        $('#banner').hover( function(event){ $(this).children().hide("slow");}
                          , function(event){ $(this).children().show("slow");}
                          );
     }
  );

HTML

<div id="banner">
   <span><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" title="Image" alt="Image"/></span>
</div>

vs

<div id="banner">
   <img src="http://static.jquery.com/fil开发者_Python百科es/rocker/images/logo_jquery_215x53.gif" title="Image" alt="Image"/>
</div>

I think really the element needs to be wrapped in a DIV. For my site, a larger image is having problems hiding; it's only hiding vertically instead of vertically and horizontally.

Wrapping in the DIV fixed this.

I haven't taken a greater look at how jQuery is performing the hide(), but this kind of makes sense, since a DIV is a block element and SPAN are not.