jQuery、onclickトランジションでCSSプロパティを変更する

Question

jQueryでは、onclickによっていくつかのプロパティが変更されるセクションがあります。私は何とかこれにCSSの移行を含めることができるかどうか疑問に思っていた。私はちょうど私のようにそれを追加しようとしましたが、それはそれが変化したときにそれをもたらさなかったプロパティを与えました。

$("#slide1-1").click(function() { 
$('.aboutchange').css('color', '#433792'); 
}); 

$("#slide1-2").click(function() { 
$('.aboutchange').css('color', 'orange'); 
}); 

$("#slide1-3").click(function() { 
$('.aboutchange').css('color', 'green'); 
}); 

$("#slide1-4").click(function() { 
$('.aboutchange').css('color', 'red'); 
}); 

Answer 1

トランジションにはjQueryのアニメーション機能を使用する必要があります。これは、1000ミリ秒の期間にわたって選択したテキストの色にアニメートします。 jQuery UIには多くのボーナス効果もあります。

$("#slide1-1").click(function() { 
    $('.aboutchange').animate({ color:'#433792' }, 1000); 
}); 

編集

あなたはCSS3のトランジションを使用しようとしている場合は、多分私は質問を理解していなかったと私はdownvotedてしまった理由です...そして、あなたはCSSの遷移と状態を宣言する必要があります.addClass（）と.removeClass（）を使用して適切な状態と遷移を追加/削除する

Answer 2

jQueryはデフォルトでカラーアニメーションを提供しません。 jquery-colorプラグインに付属のjQuery UIを使用するか、jquery-colorを使用してください。次に、他のプロパティのようにアニメーション化することができます：

$element.animate({ color: 'blue' });