jQuery를 사용하여 색상 간을 전환하는 방법 click()

Question

사용자가 다른 라디오 버튼 값을 선택할 때 색상 간 전환이 필요합니다. 나는 이미 바디의 배경색을 즉각적으로 변경하면서 그 순간에 '작동하는'예제를 가지고 있지만, fadeOut() 및 fadeTo() 메소드를 사용하려고했지만 아무 소용이 없었다.

여기 누군가가 나를 바꾸어야하고 활용해야 할 방법을 가르쳐 줄 수 있다면 여기까지 있습니다.

미리 감사드립니다.

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

Answer 1

당신은 transitionbackground-color CSS를 사용할 수 있습니다. jquery를 약간 수정했는데이 대답의 CSS를 추가하면됩니다. jQuery를하지 않고

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