JQuery условие для анимации

Question

Я новичок в 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 () или что-то еще, то это будет хорошо для второго стиля пролонгации.

Есть идеи?

Answer 1

Несколько замечаний, но не обязательно ответ на ваш вопрос.

Таблица стилей загружается и применяется при загрузке страницы, изменение ее не изменит стиль ретроспективно. Таким образом, следующее не будет работать

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

(И даже если бы он это сделал, он бы изменил все ваши <link> теги!)

Существует либеральное отображение и скрытие с помощью дисплея:

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

Когда вы можете просто использовать метод hide ().

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

Ваша область видимости переменной tt может не помочь вам. Delcare менее локально, т.е. вне ваших анонимных функций

Помните также, что ваши селекторы классов сравнительно медленные. Если вы можете объединить их, мы выбираем элемент, например

$("div.box_nav")

Или даже добавьте к ним атрибут id, который:

$("#MyNav")

Answer 2

Вы объявляете переменную "tt" локально, а затем пытаетесь получить к ней глобальный доступ по внешнему виду. Не могу быть уверен, потому что мы не можем видеть всю структуру вашего кода, но если вы измените:

var tt = ....

до

window.tt = ....

Это, вероятно, будет работать. Я не рекомендую делать это глобальной переменной, если вы можете включить ее в метод или замыкание, но выполнение вышеупомянутых действий по крайней мере докажет, является ли это проблемой.

Answer 3

То, что другие говорили об изменении файла CSS после загрузки страницы, верно. Лучшее решение состоит в том, чтобы поместить все CSS в один и тот же файл с разными именами классов и динамически добавлять / удалять имена классов для ваших элементов, а не пытаться изменять сами классы (что не будет работать )

Редактировать - добавлен пример. Что-то вроде:

<html>
  <head>
    <link href='<?php bloginfo("template_url"); ?>/css/styles-black-white.css' type="text/css" rel="stylesheet">
    <link href='<?php bloginfo("template_url"); ?>/css/styles-grey-white.css' type="text/css" rel="stylesheet">        
  </head>
  <body class=gw>
  </body>
</html>

и в javascript:

$("body").removeClass("gw").addClass("bw");

и в вашем css

/* for example you had a class for anchors */
body.gw a { ... } /* was: a { ... } in styles-grey-white.css   */
body.bw a { ... } /* was: a { ... } in styles-black-white.css  */
/* for example you had a class called "hilite" */
body.gw .hilite { ... } /* was: .hilite { ... } in styles-grey-white.css   */
body.bw .hilite { ... } /* was: .hilite { ... } in styles-black-white.css  */

Answer 4

Проблема здесь в том, что переменная tt существует только в пределах функций щелчка. То, что вы могли бы сделать, это объявить tt раньше, а затем установить его внутри действий щелчка.

var tt = 'black'; // Default to black

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

В этот момент tt будет либо "черным", либо "серым" и будет существовать в пределах области, в которой вы проверяете его с помощью вашего if заявления.

Кроме того, $ является псевдонимом jQuery, поэтому нет необходимости переключаться между ними. Вы можете просто использовать $, когда пытаетесь остановить анимацию, чтобы все было согласованно.

---

ОБНОВЛЕНИЕ: Я думаю, что проблема (я не могу видеть весь ваш код, поэтому я не уверен) заключается в том, что вы объявляете событие hover, когда документ загружается. В этом случае он всегда будет использовать черный наведение. Что вам нужно сделать, это поместить код наведения в функции изменения таблицы стилей, чтобы при обновлении таблицы стилей всплывающее окно обновлялось. Вот пример:

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

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

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

    return false;
});

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

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

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

    return false;
});

Answer 5

Изменение файла CSS не приведет к повторному отображению страницы. Вам нужно будет вызвать обновление для отображения новых стилей.

Вы не можете использовать Animate для манипулирования значениями цвета CSS, если не используете плагин color для цветов. Причина этого заключается в том, что реализация JQuery по умолчанию функции Animate увеличивает только свойства css с десятичными значениями. Цвет, представленный в виде шестнадцатеричного или строкового значения, не будет правильно анимирован.

Answer 6

Ну, например, вы используете tt var вне области его функции. Если вы объявите это внутри этой функции щелчка, вы не сможете увидеть ее вне этого блока. Сначала вы должны объявить это глобально.