如何使用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点击颜色之间的转换点击（）

回答

相关问题