Unable to fadeIn append contents

Unable to fadeIn append contents

So, this is my first attempt at writing jQuery on my own. I put together a fading menu of sorts if you want to call it that. The problem that I am having is everything fades fine except the image I am appending to the end of the links. It fades out great, but I cannot get fadeIn to work at all.

Preview: http://cu3ed.com/jqfade.html

HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.effects.core.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    </head>

    <body>
        <div id="nav">
            <ul>
                <li class="top"><a href="#" class="fade">Our Sponsors</a></li>
                <li><a href="#" class="fade">Latest News</a></li>
                <li><a href="#" class="fade">Testimonials</a></li>
                <li><a href="#" class="fade">Twitter</a></li>
                <li class="bottom"><a href="#" class="fade">Facebook</a></li>
            </ul>
        </div>
    </body>
    </html>





















CSS

  1. html {
        height:100%;
        background-color:#DFDFDF;
    }
    body {
        cursor:default;
        font-family:"Lucida Grande",Lucida,Verdana,sans-serif;
    }
    html, body {margin:0; padding:0;}
    #nav {
        font-size:11px;
        border:1px solid #CCC;
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        margin:40px;
        padding:0px;
        width:250px;
        text-transform:uppercase;
        font-weight:bold;
    }
    .plus {
        margin:0;
        padding:0;
        border:none;
        position:absolute;
        right:10px;
    }
    #nav ul{
        background-color:#EFEFEF;
        border:1px solid #F9F9F9;
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        margin:0px;
        padding:20px;
    }
    #nav ul li {
        list-style:none;
        margin:5px 0;
        padding:0;
        text-align:left;
        position:relative;
    }
    li.top {margin-top:0px !important;}
    li.bottom {margin-bottom:0px !important;}
    #nav ul li  a {
        background-color:#F9F9F9;
        border:1px solid #CCCCCC;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        display:block;
        list-style:none;
        margin:0;
        padding:6px 15px;
        text-decoration:none;
        color:#BBBBBB;
    }
    #nav ul li  a:hover {
        text-decoration:none;
    }


























































JQUERY
 (custom.js)
  1. $(document).ready(function() {
       
        $(".fade").hover(
            function () {
                $(this).fadeIn(500).append($("<img class='plus' src='img/plus.png' />"));
                $(this).stop().animate({
                    opacity: 1,
                    borderBottomColor: "#6BD8FF",
                    borderLeftColor: "#6BD8FF",
                    borderRightColor: "#6BD8FF",
                    borderTopColor: "#6BD8FF",
                    color: "#03A5DF",
                    backgroundColor: "#E3F8FF"
                }, 500);
            },
            function () {
                $(this).find("img:last").fadeOut(200);
                $(this).stop().animate({
                    opacity: 1,
                    borderBottomColor: "#CCCCCC",
                    borderLeftColor: "#CCCCCC",
                    borderRightColor: "#CCCCCC",
                    borderTopColor: "#CCCCCC",
                    color: "#BBBBBB",
                    backgroundColor: "#F9F9F9"
                }, 200);
            }
        );
       
    });





























If anyone can assist that would be awesome. I really appreciate it!