＆＃8220;速度＆＃8221;の場合、jquery addclass / removeclassが常に機能するとは限りません。設定されている（マウスイベント）
https://stackoverflow.com/questions/607386
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
cssクラスでは＆quot; employee_mouseover＆quot; bgの色を赤にします。
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover");
});
これは正常に動作します。
しかし、見た目を良くするために速度を設定すると、mouseenter + mouseleaveをすばやく行うと要素が赤のままになります。
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover", "fast");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover", "fast");
});
非常にゆっくりと要素に出入りしない限り、これはうまく機能しません。
これを行うより良い方法はありますか？
事前に感謝します。
解決
実行できますが、 jquery coloranimateプラグインをインストールする必要があります。次に、以下のコードを使用して色をゆっくりと変更できます。
$(".employee").bind("mouseenter", function() {
$(this).animate({backgroundColor: "#bbccff"}, "slow");
});
$(".employee").bind("mouseleave", function() {
$(this).animate({backgroundColor: "white"}, "slow");
});
他のヒント
jQuery UIエフェクトコアは、基本クラスAPIを拡張して、2つの異なるクラス間でアニメーション化できるようにします。以下の方法が変更されました。現在、速度、イージング（オプション）、コールバックの3つの追加パラメーターを受け入れます。
したがって、@ Thomasは自分のページにjQueryとjQuery UIの両方のライブラリを含めて、addClassとremoveClassの速度とコールバックのパラメーターを有効にする必要があります。
間違ったイベントを使用しています。あなたが欲しい：
$(".employee").hover(function() {
$(this).addClass("employee_mouseover");
}, function() {
$(this).removeClass("employee_mouseover");
});
また、クラスの追加または削除に関する速度の引数はありません。
はい、CSSで行います！
.employee:hover{background:pink;}
また、 addClassにはパラメーター化された速度はありません、速度はエフェクトに対してのみ存在します。
removeClassにはdurationパラメーター（http://docs.jquery.com/UI/Effects/removeClass）がありますが、FFでは機能しません。私のコードに何か問題はありますか？私はJQueryが初めてです。関数をアニメーション化してみます。
ここでやろうとしていることは、アンカーを使用し、アンカーをクリックしたときに目的のアンカーの場所を強調表示することです。 これが私のHTMLコードです。
<ul>
<li><a href="#caricatures">Caricatures</a></li>
<li><a href="#sketches">Sketches</a></li>
</ul>
宛先アンカーは-
<a href="#" id="caricatures"><h3>Caricatures</h3></a>
ここで、背景色を変更します。
こちらが私のCSSです-
<style>
.spotlight{
background-color:#fe5;
}
</style>
ここに私のJQueryコードがあります-
<script>
$('a[href$="caricatures"]').click(function(){
$('a[id="caricatures"] h3').addClass("spotlight");
$('a[id="caricatures"] h3').removeClass("spotlight",1000);
});
</script>
addClass は、CSSクラスを要素に追加するためのものです。トゥイーンによってCSSプロパティを変更する場合は、効果を使用して明示的に変更する必要があります。
あなたのコード：
$(this).addClass("employee_mouseover", "fast");
this に employee_mouseover と fast の2つのクラスを追加します。これは明らかにあなたが望んでいるものではありません。
jQueryでの私の移行は次のとおりです。
$("#layoutControl .actionList").click(
function(){
$("#assetsContainer").fadeOut("fast",function(){
$(this).removeClass("assetsGrid").addClass("assetsList");
$("#iconList").attr("src", "/img/bam/listIcon.png");
$("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
$(this).fadeIn("fast");
});
}
);
JqueryUIを適切に含めても、「期間」を使用すると、これらはすべてFFの外で失敗するように見えます。パラメータ。 IEでJSエラーが発生します。私は吸うanimate（）に固執します。
http://jqueryui.com/docs/addClass/
http://jqueryui.com/docs/removeClass/
http://jqueryui.com/docs/switchClass/
http://jqueryui.com/docs/toggleClass/
jqueryuiサイトのドキュメントには、これについての注記はありません。
$(".employee").hover(function() {
$(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
$(this).stop().animate({ backgroundColor: "white" }, "slow");
});
CSS3トランジションを使用して、この効果を実現できます。
a:hover {
color: red;
-webkit-transition: 1s color linear;
-moz-transition: 1s color linear;
}
a:link, a:visited {
color: white;
-webkit-transition: 1s color linear;
-moz-transition: 1s color linear;
}
