jquery hover () method and jquery Toggle () Method Usage Example

The jquery hover () method and the jquery toggle () method are two synthetic events, similar to the Ready () method, all of which belong to the jquery custom method. The properties and how to use the two methods are explained below.

first, hover () method: The syntax structure is: hover (enter,leave). Used to simulate cursor hover events. A 1th function (enter) is triggered when the cursor is moved over the target element, and the 2nd function (leave) is triggered when the element is moved out. Front-End Framework UI sharing

Here is a sample code:

. Code

1. $ (function () {
2. $ ("#panel h5.head"). Hover (function () {
3. $ (this). Next (). Show ();
4. },function () {
5. $ (this). Next (). Hide ();
6. })
7. })

The effect of the code after it runs is the same as when the code below runs. When the cursor is over the "title" link, the corresponding "content" is displayed, and when the cursor slides out of the "title" link, the corresponding "content" is hidden.

. Code

1. $ (function () {
2. $ ("#panel h5.head"). MouseOver (function () {
3. $ (this). Next ("Div.content"). Show ();
4. });
5. $ ("#panel h5.head"). MouseOver (function () {
6. $ (this). Next ("Div.content"). Hide ();
7. })
8. });

Note: There are pseudo-class selectors in the CSS, such as ": hover", which changes the appearance of the element when the cursor hovers over the element. Pseudo-class selectors can be used with any element. In IE 6 browsers, however, pseudo-class selectors are only available for hyperlink elements. For other elements, you can use the hover () method of jquery. Front-End Framework UI sharing

The hover () method is an accurate alternative to the bind ("MouseEnter") and bind ("MouseLeave") in jquery, rather than the substitution of bind ("MouseOver") and bind ("Mouseout"). So when the 2nd function of the hover () method needs to be triggered, it needs to be triggered with trigger ("MouseLeave") instead OF Trigger ("Mouseout").

second, Toggle () Method: The grammatical structure is: toggle (FNL, fn2, ... FnN). Used primarily to simulate mouse continuous click events. The 1th time the element is clicked, triggering the specified 1th function (FN1), and when the same element is clicked again, the specified 2nd function (FH2) is triggered, and if there are more functions, it is triggered sequentially until the last one. Each subsequent click repeats the loop call to these functions.

In the previous example of reinforcing effect, the following jquery code was used:

. Code

1. $ (function () {
2. $ ("#panel h5.head"). Toggle (function () {
3. $ (this). Next (). Show ();
4. },function () {
5. $ (this). Next (). Hide ();
6. })
7. })

Using toggle () not only achieved the same effect, but also simplified the code.

The toggle () method has another role in jquery: toggling the visible state of an element. If the element is visible, it is hidden after the click Toggle, or visible if the element is hidden after clicking Toggle. So the above code can also be written as follows:

. Code

1. $ (function () {
2. $ ("#panel h5.head"). Toggle (function () {
3. $ (this). Next (). Toggle ();
4. },function () {
5. $ (this). Next (). Toggle ();
6. })
7. })

In order to have a better user experience, you now need to not only display the content, but also highlight the title after the user clicks the title link. Code: Front-End framework UI sharing

. Code

1. $ (function () {
2. $ ("#panel h5.head"). Toggle (function () {
3. $ (this). AddClass ("highlight");
4. $ (this). Next (). Show ();
5. },function () {
6. $ (this). Removeclass ("highlight");
7. $ (this). Next (). Hide ();
8. });
9. })

After running the code, if content is displayed, Title highlights: If content is hidden, the title is not highlighted.