jQuery：使用选择中的颜色更改mousemove上div的背景颜色

Question

I want to set about four colors, and use them for the background color of a div. There should be a smooth transition from one color to the next while moving the cursor.

My idea looks like that:

 $(document).mousemove(function(e) { let path = ["blue", "orange", "red", "green"] if ($pageX <= $pageY) { //??? } $("div").css('background-color', path); });

 div { width: 300px; height: 300px; background-color: #e57266; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="color-area"></div>

But every try failed. I would be soooo thankful for help! :)

Answer 1

I can suggest such a solution. Add transition: .1s for div tag to smoothly change the color.

 $(document).mousemove(function(e) { let path = ["blue", "orange", "red", "green"] $("div").css('background-color', path[Math.floor(Math.random() * path.length)]); });

 div { width: 300px; height: 300px; background-color: #e57266; transition: .1s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="color-area"></div>

Answer 2

Try this:

A small modification to @sergey's answer

 $(document).mousemove(function(e) { let path = ["blue", "orange", "red", "green"] $("div").css('background-color', path[Math.floor(Math.random() * path.length)]); });

 div { width: 300px; height: 300px; background-color: #e57266; transition: background 1s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="color-area"></div>

You can change the transition if you want it faster

Edit

@sergey managed to answer a few minutes before me!