JQuery toggle usage analysis_jquery

Today we focus on the toggle(fn, fn,….) function, which is mainly used to switch the rotation operation of a certain event.
For example: for a button click event and a DIV background, click the button once to display the DIV background as blue. When clicking the second time, change the DIV's
background color to black.
The HTML code we defined is as follows:

The content of id "DivToggle" is displayed here

The initial style defined is as follows:

Copy code The code is as follows:

#DivToggle {
height: 150px;
width: 200px;
margin: 50px;
background-color: #6CC;
}

In toggle(fn,fn,….); first understand the toggle() function, which is mainly used to switch elements display status. If an element is displayed, it becomes hidden after calling .toggle().

JQuery code:

Copy code The code is as follows:

After clicking the button, the DIV is hidden, click again to display the DIV, and then loop.

Here we can manually set the display and hiding of elements, display: toggle(true); hide: toggle(false);

We can also set the speed for the hiding and display of elements.

$("#DivToggle").toggle(600);


Of course at this point we can think of what we often encounter in web pages: move the mouse up to display it, and then The effect will be hidden when the mouse is moved away.

Of course a hover(fnover,fnout) event is used here. We only need to set fnover and fnout to the above toggle(600);

The fnover here is the event function when the mouse moves up, and fnout is the event function when the mouse moves away.

We set toggle(600) as a separate function to call, which makes it easier to read.

Copy code The code is as follows:

In this way we move the mouse to the button, and then Turn it on, and you can see the hiding and display effects of DivToggle.

In order to demonstrate the rotation operation of toggle(fn, fn,...), we use the above function, and then add a Click event using btnShow to first hide and display the DIV, and then the style of the table DIV.

You can display hidden code like this (in fact, this code is problematic, but it can achieve the desired effect if written like this):

Copy the code The code is as follows:

Looking back at this code, I think it is very problematic. toggle(fn,fn,…) itself is used to add Click events to specified elements. Then loop through the functions in toggle
on this element. Suddenly I felt a little confused. Like twists. I hope Niuniu can explain it.
In order to demonstrate the effect of the toggle round-robin function, there is no way to change the style of the Div by clicking the button.
The code to change the DIV style is as follows:

Copy the code The code is as follows:

$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$(this).click(function() { $(this).css("background", "Blue"); } );
}, function(event) {
$(this).click(function() { $(this).css("background", "Green"); });
}) ;
}
);

At this point, it suddenly occurred to me that to achieve the above effect, load the event directly to the button, that is, "btnShow", which means first hiding the display, and then changing the style of the DIV. The detailed code is as follows:

Copy code The code is as follows:

This can achieve the above desired effect, that is, first hide, then show, and then change the style.