誤って埋め込まれた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

2つの関数の外でそれを宣言し、 " + + "

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  
}); 

---

編集： 更新された質問に基づいて、少しコード削減を試みているようです。それらの間には、統合を試みることは十分に複雑であるため、より多くのコードになってしまう可能性があるように十分な違いがあるようです。

減らす1つの方法は、あなたを変えることです hover() 2の代わりに1関数を受け入れるハンドラー：

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

少し短くします。

別のオプション（Jqueryuiを使用しているので）は、 toggleClass （UIの最新バージョンでは壊れていると思いますが）。

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

1つのコールバックでローカル変数を作成し、もう1つのコールバックで使用しようとしています。

代わりに、古い色を使用して保存する必要があります $.data.
また、変数の周りに引用符を付けないでください。それは文字列になります。