Состояние 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); } 
); 

Дело в том, если я renctly добавил кнопку изменения таблицы стилей, которая также работает отлично:

$(".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() sor, то все, что он делает хорошо, второй стиль roll-over.

Любая идея?

Answer 1

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

var tt = .... 

в

window.tt = .... 

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

Answer 2

Проблема заключается в том, что переменная 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, поэтому нет необходимости переключаться между ними. Вы можете просто использовать $, когда вы пытаетесь остановить анимацию, чтобы все было согласовано.

---

UPDATE: Я думаю, что вопрос (я не могу увидеть весь код, так что я не могу быть уверен), что вы объявляете событие парения, когда документ загружается. В этом случае он всегда будет использовать черное зависание. Что вам нужно сделать, это разместить код наведения внутри функций изменения таблиц стилей, чтобы наведение обновлялось при изменении таблицы стилей. Вот пример:

$(".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 3

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

Answer 4

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

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

$("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 не может помочь вам. Делайте это менее локально, т. Е. Вне ваших анонимных функций

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

$("div.box_nav") 

Или даже добавить идентификатор атрибута для них в использовании, что:

$("#MyNav") 

Answer 5

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

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

Answer 6

Что другие говорили об изменении CSS-файла после загрузки страницы. A Лучшее решение должно заключаться в том, чтобы поместить все 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 */