如何使用jQuery點擊顏色之間的轉換點擊（）

即時通訊當用戶選擇不同的單選按鈕值時正在尋找顏色之間的轉換。我現在已經有了一個「工作」的例子，但是我試圖使用fadeOut（）和fadeTo（）方法，但無濟於事。如何使用jQuery點擊顏色之間的轉換點擊（）

這是我到目前爲止，如果有人可以指我到哪裏我應該改變和利用哪種方法。

非常感謝提前！

colourChange.js

$(document).ready(function() { 

    $("#goodRad").click(function() { 

     $("body").css('background-color', '#90EE90');//LightGreen 
     console.log("make body green!"); 
    }); 

    $("#okRad").click(function() { 

     $("body").css('background-color', '#FFA07A');//LightSalmon 
     console.log("make body amber!"); 
    }); 

    $("#badRad").click(function() { 

     $("body").css('background-color', '#F08080');//LightCoral 
     console.log("make body red!"); 
    }); 
});

來源

2017-02-09 oldbie

沒有jQuery的：'體{轉型：背景顏色爲500ms緩解}' – Scott

這就是偉大的！非常感謝，我有點希望與jQuery保持更多的瞭解，但這很酷！ – oldbie

您可以使用CSS來transitionbackground-color。我也重新修改了你的jQuery，但是你需要做的就是從這個答案中添加CSS。

$('input').on('change',function() { 
 
    $('body').css('background-color',$(this).attr('data-color')); 
 
})

body { 
 
    transition: background-color .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="color" data-color="#90EE90" type="radio"><input name="color" data-color="#FFA07A" type="radio"><input name="color" data-color="#F08080" type="radio">

來源

2017-02-09 16:43:35

優秀！就是我在找的:)。確實已經有輸入的值（但不需要它們，所以可以改爲有）如果不使用.val（）方法，是否會有另一種方法實現相同的結果？ – oldbie

@oldbie肯定更新了我的答案 –

再次，優秀！：-）謝謝！ – oldbie

如何使用jQuery點擊顏色之間的轉換點擊（）

回答

相關問題