jQuery无法在Internet Explorer中像在其他浏览器中一样工作

Question

I'm building a personal web page, and have put a temporary version on www.aegaeon.comule.com. I followed the Dragon Interactive tutorial (http://labs.dragoninteractive.com/pufferfish_article.php) to make a fading hover menu with a gradient background. I've arranged the sub-pages as "panels" to hide and show upon clicking the corresponding navigation button. Here is my javascript/jQuery code:

var color_text = '#999';
var color_text_hover = "#C0C0C0";

$(function(){

    $("div.panel:not(:first)").hide();  // hide all panels except the home panel

    var loc=window.location;
    window.location.replace(loc+"#home");   // make window location correspond to home panel

    var menu=$("#navbar a");
    menu.click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.panel"+previous).fadeOut("slow")
            $("div.panel"+selected).fadeIn("slow");
            }
        menu.removeClass("selected");
        $(this).addClass("selected");
    });

    $('#navbar li a').append('<span class="hover"></span>')

    $('#navbar li a').hover(function() {


        if(!$(this).hasClass('selected')){
        // Stuff that happens when you hover on
        $('.hover', this).stop().animate({
            'opacity': 0.2
            }, 400)

            $(this).stop().animate({ 
                //backgroundColor: color_bg_hover,
                color: color_text_hover
            },400);
        }

    },function() {

        // Stuff that happens when you unhover
        $('.hover', this).stop().animate({
            'opacity': 0
            }, 700, 'easeOutSine')

        $(this).stop().animate({ 
                //backgroundColor: color_bg,
                color:color_text
            },700);

    })
});

In Chrome, Firefox, and Safari, the site seems to work fine, but in Internet Explorer it is not. The navigation buttons are initially white, but do become visible when you hover over them, suggesting that the javascript is at least partially working, but I can't explain the different behavior. Any thoughts would be greatly appreciated.

Answer 1

.stop() doesn't work in ie.

instead of .stop().animate({}); use .animate({new animation that you want to apply to the element.});

Answer 2

I see a lot of missing semicolons, for example:

        $("div.panel"+previous).fadeOut("slow")
        $("div.panel"+selected).fadeIn("slow");

Check your code.