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

Question

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

Примечание: это требует jQuery UI.

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

Спасибо, парни. Я на самом деле пытался реорганировать этот код:

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

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

Answer 2

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

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

Answer 3

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

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