Неверно встроенная переменная jQuery

Question

функция обратного вызова здесь не работает.Я думаю, что я неправильно использую переменную startColor.

примечание: для этого требуется пользовательский интерфейс jQuery.На самом деле я пытался изменить код:

$("nav ul li a, aside ul li a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
    },function() {  
    $(this).stop().animate({ color: "#5944b2"}, 350);  //Start color
});
$("h5#logo a, button").hover(function() {  
    $(this).stop().animate({ backgroundColor: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ backgroundColor: "#000000"}, 350);
});
    $("h3 a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: "#000000"}, 350);
});

У меня разные начальные цвета и разные свойства, которые я хочу анимировать.Похоже, есть лучшее решение, чем повторять один и тот же код 3 раза.

Answer 1

Объявите его вне двух функций и удалите " + + "

var startColor;

$("a").hover(function() { 
    startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

... или еще лучше, используйте .data(), чтобы запомнить цвет для этого конкретного элемента:

$("a").hover(function() { 
    if( !$(this).data( 'startColor' ) ) {
        $(this).data( 'startColor', $(this).css("color") );
    }
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: $(this).data('startColor')}, 350);  
}); 

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

var startColor = $(a).css("color");

$("a").hover(function() { 
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

---

РЕДАКТИРОВАТЬ: Судя по вашему обновленному вопросу, похоже, что вы пытаетесь сделатьнебольшое сокращение кода.Кажется, что между ними достаточно различий, что попытка консолидации будет достаточно сложной, чтобы вы могли получить больше кода.

Один из способов уменьшить это - изменить обработчики hover() так, чтобы они принимали 1 функцию вместо 2:

$("h3 a").hover(function( e ) {  
    $(this).stop().animate({ color: e.type == 'mouseenter' ? "#54a888" : "#000000"}, 350);
});

Немного сокращает его.

Другой вариант (поскольку я предполагаю, что вы используете jQueryUI) - анимация toggleClass (хотя я думаю, что она может быть повреждена).в последней версии пользовательского интерфейса).

$("h3 a,nav ul li a, aside ul li a,nav ul li a, aside ul li a").hover(function( e ) {  
    $(this).stop().toggleClass('hover', 350);
});

Затем в CSS:

h3 a.hover {
    color:#000000;
}

nav ul li a.hover, aside ul li a.hover {
    color:#54a888;
}

// etc...

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

Answer 2

" + + " не имеет смысла. Просто используйте

$(this).stop().animate({ color: startColor}, 350);  //Start color  });  

Answer 3

Вы создаете локальную переменную в одном обратном вызове и пытаетесь использовать ее в другом.

Вместо этого вы должны сохранить старый цвет, используя $.data.
Также не ставьте кавычки вокруг переменной;это превращает его в строку.