Wie Sie mit jQuery zwischen den Farben wechseln click()

Question

Ich suche nach einem Übergang zwischen Farben, wenn ein Benutzer andere Radio Button-Werte auswählt. Ich habe bereits ein "Arbeits" -Beispiel mit der sofortigen Änderung der Hintergrundfarbe des Körpers, aber ich habe versucht, die Methoden fadeOut() und fadeTo() zu verwenden, aber ohne Erfolg.

hier ist, was ich bisher habe, wenn mir jemand zeigen könnte, wo ich ändern sollte und welche Methode zu verwenden.

Vielen Dank im Voraus!

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

Sie CSS transitionbackground-color verwenden können. Ich habe deine jQuery auch etwas überarbeitet, aber du musst nur das CSS aus dieser Antwort hinzufügen.

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