フェードアウト時に色を変更し、新しいデータが取り込まれたときにフェードインに戻すにはどうすればいいですか？

Question

Xの秒間のテキストの色を変更し、ページに新しいデータが更新されたときに元の状態に戻すにはどうすればよいですか。 （私はあなたの「CURRENT_PRICEは」IDまたはクラスであるかわからない、また同様に、以前の価格を保存するためにVARを使用します。

function displayPrice() { 
fetch_price(); 
const price = json[0]; 
document.getElementById('current_price').innerHTML = `$${price}`; 
$('current_price').fadeOut(500); 
//if price is greater than previous price, set current_price color to green 
//else set current_price color to red 
$('current_price').fadeIn(500); 
//set current_price color to white 
}); 
} 

setInterval(displayPrice, 5000); 

コードのアップデート：このようなフェードアウト後

const API_URL = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=NZD'; 
function displayPrice() { 
fetch(API_URL) 
.then(res => res.json()) 
.then(json => { 
const price = json[0]; 
document.getElementById('btc_usd').innerHTML = `$${topCoin.price_usd}`; 
$('btc_usd').fadeOut(500); 
$('btc_usd').fadeIn(500); 
}); 
} 
setInterval(displayPrice, 5000); 

Answer 1

使用コールバックp_price）

$(this).find("#current_price").fadeOut("slow", function() { 
    if (price > p_price) { 
     $(this).css({color:"green"}); 
    } else { 
     $(this).css({color:"red"}); 
    } 
}); 

また、fadeInの場合もあります。

Answer 2

私はそれを動作させることができました。私はすべてを通り抜けていました。

$("#current_price").css({color:"#4CAF50"}); 
$('#current_price').fadeOut(500); 
$('#current_price').fadeIn(500); 

Answer 3

シナリオの実装にはfadeToggle（）メソッドを使用できます。数秒後にこのメソッドを呼び出し、値が存在する場合は通常にします。

入力値

<input type="text" id="current_price" onchange="return ChangeValue(this);"/> 



$(document).ready(function() { 
    $('#current_price').on('change', ChangeValue) 
    { 
    $('current_price').fadeToggle(); 
    } 
    });