Smooth background color change. How to change background color: after pseudo class with jQuery? Jquery change color

In this lesson we will talk about the effect in which the background of an object smoothly changes as a result of hovering the mouse cursor over it.
First, as you’ve probably already gotten used to (if this is not your first time using the jQuery library), we connect jQuery to our site.
In addition to jQuery itself, we also need jQuery UI.

If you are familiar with jQuery principles, you should remember that in the header we must place the call code, in this case, the color change animation, so that it loads before the main content of the page is loaded. $(document).ready(function() ( // put your animation call code here ));

HTML

Here is an example of html markup.

Changing the background color of an element Animation of color changing on hover / PC games / Portal 2 Portal 2

The original Portal is already a cult thing and unexpected for its time. It only once again confirms the time-tested thesis about the triumph of ideas over advanced technologies.

CSS

The CSS styles for our page look like this.

Png); text-align:left; color:#333; width:800px; font-size:14px; font-family:georgia, "time new romances", serif; margin:0 auto; padding:0; ) a( color:#333; text-decoration:none ) a:focus ( outline: none; ) h1 ( font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:- 2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; ) h2 ( font-size: 24px; font-family: verdana, helvetica, arial, sans- serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a( font-size:14px; font-family:verdana, helvetica, arial , sans-serif; letter-spacing:-1px; color:#333; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; ) p ( color:#333; float: left; line-height:22px; margin:5px; padding:0 0 10px; ) #container ( margin: 0; padding: 0; ) .boxes ( background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; ) img ( border:5px solid #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width: 100%; ) .block ( color:#0066CC; float:left; overflow:hidden; position:relative; width:600px; ) .block h4, .block h4 a( color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; )

JS

A DIV element with the class .boxes is the element, the block, whose color we want to change.
This is the code we will call in the header.

$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ), function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); The backgroundColor parameters set the color, and the value 800 is the animation speed.

There is a layer with text and a button, when you click on it, you need to change the color of the text on this layer.

Change color (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00"); )) )); #layer (border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;) But so that you understand where this misconception of people who condemn pleasure and praise pain comes from, I will reveal the whole picture to you and explain exactly what this man who discovered the truth, whom I would call the architect of a happy life, said. Indeed, no one rejects, despises, or avoids pleasures just because they are pleasures, but only because those who do not know how to rationally indulge in pleasures suffer great suffering. Just as there is no one who would love, prefer and crave suffering itself only because it is suffering, and not because sometimes circumstances arise when suffering and pain bring some considerable pleasure. To use a simple example, which of us would engage in any kind of strenuous physical exercise if it did not bring some benefit with it? And who could justly blame someone who strives for pleasure that would not bring with it any trouble, or someone who would avoid pain that would not bring with it any pleasure?

Today we will learn how to make a smooth change in the color of a block using CSS and JQuery. With this plugin you can achieve amazingly beautiful design results. For example, you can make a cool menu that will smoothly change color when hovered over, and believe me, it looks very beautiful.

JQuery

To begin with, between the tags and you need to put the following:

Then, again between the tags, we copy this script:

$(document).ready(function())( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ), function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));

Where .Box is the block class we came up with above in CSS.

“#FF4500” - hover color. 400 — animation speed when hovering.

“#ffffff” is the initial color after moving the cursor away. 400 — animation speed when moving the cursor away.

HTML

After you do everything as written above, the color of the block will gradually change. To insert such a block on the page, you just need to add the following in the right place:

And the block will appear.

Important

This plugin can only change the background color. For example, you won’t be able to attach it to links or text. Another plugin changes the color of links (I’ll definitely write how to do it soon).

If you want to make the blocks on the page have different colors, like mine, you will need to place several scripts in a row between the tags and, accordingly, do not forget to change the color to the desired one. The most important thing is to change the class, for example in our example above - the Box class, and the next script should be with a different class, for example Box1, then Box2 and so on.

That's all, dear friends. If you don’t understand anything, be sure to ask in the comments. See you soon.

Somehow, when faced with the need to write the effect of text flowing from one color to another, I unexpectedly found out for myself that this is not such a trivial task.

You can leave a checkmark only opposite Effects Core. It is this module that extends the jQuery.animate() method we need; you just need to connect the downloaded assembly:

After that, the color of the text, frame or background of any page element is available for animation.

Step 2. Delay between element animations.

Now that everything is in order with the animation, there is a second feature that complicates the task - to add a delay between the animation of the collection elements.

Let's say we have a collection of numbered list elements:

Var $elements = $("ol > li");

The animation of each next element of the collection should begin with a certain delay after the previous one.

You can achieve the desired result using the following code:

For (var i = 0; i

Note that setTimeout() takes as its first parameter a function that returns another function.

If this is not done, then the variable i will be passed by reference and when the timer function execution time comes, i will have its last value equal to $elements.length , since by this moment the for loop will have ended and the animation will not be executed at all.

Using a nested function, we thereby copy the value of i at each iteration of the loop, with the help of which we achieve correct operation planned.

conclusions

You can use such animation, for example, to show that in some list of parameters you must select at least one, or simply to draw attention to some block of the page.