javascript - 动画的jQuery条件

对javascript和jQuery来说是全新的，所以这个问题似乎很愚蠢，但是我找不到关于它的任何示例或文档。

我得到了这个功能，可以进行一些彩色动画的滚动和展开，效果很好:

$(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
);

如果我顽强地添加了一个样式表更改按钮，该按钮也可以正常运行的事实:

$(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

关键是我想在翻转菜单上创建一个条件，以便我也可以切换它的颜色。

所以我尝试了以下几件事:

/////////////////////////////////////////////////////////////////////////////
    //Stylesheet change
    $(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "black";
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "grey";
        return false;
    });

    /////////////////////////////////////////////////////////////////////////////
    //Over menu
    if (tt == "black"){
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
        );
    }else {
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
        );
    }

但是，当然不会走。唯一起作用的是，如果我在if()中更改“black”或其他任何内容，则第二种翻转样式效果很好。

任何想法 ？

最佳答案

有几件事需要评论，但不一定能回答您的问题。

样式表是在页面加载时加载和应用的，对其进行更改不会追溯更改样式。所以以下将不起作用

$("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");

(即使这样做，它也会更改您的所有<link>标签!)

使用display可以进行自由显示和隐藏:

$(".wp-polls-loading").css({ display:"none"});

当您可以只使用hide()方法代替时。

$(".wp-polls-loading").hide();

您对tt变量的作用域可能对您没有帮助。不在本地(即在您的匿名函数之外)进行Delcare

还请记住，您的类选择器相对较慢。如果可以合并它们，我们可以使用元素选择器，例如

$("div.box_nav")

甚至向他们添加一个id属性:

$("#MyNav")