jquery's method of determining whether an element is visible

This example describes how jquery can determine whether an element is visible. Share to everyone for your reference. Specifically as follows:

JQuery can easily determine that an element is visible or hidden, and then do a different processing separately. For example, I want to display different text and icons on a button based on whether a div is visible. This can be accomplished by:

Method One:

?

1 2 3 4 5 6 7 8 9 10 11

$ (' #para_div button '). Click (function () {if ($ (this). Next (). are (": visible")) {//$ (this). HTML (' Display '), $ (this). CSS ({" Background ":" url (/images/btn_arrow_down.png) no-repeat "}); else {//$ (this). html (' hide '); $ (this). CSS ({"Background": "url (/images/btn_arrow_up.png) no-repeat"}), $ (this). Next ( ). Slidetoggle (' fast '); });

Method Two:

?

1 2 3 4 5 6 7 8 9 10 11

$ (' #para_div button '). Click (function () {if ($ (this). Next (). CSS (' display ') = = ' None ') {//$ (this). html (' hide '); $ (this). CSS ({"Background": "url (/images/btn_arrow_up.png) no-repeat"}); 　} else{//$ (this). HTML (' Display '); $ (this). CSS ({"Background": "url (/images/btn_arrow_down.png) no-repeat"}); $ (this). Next (). Slidetoggle (' fast '); });

Method Three:

?

1 2 3 4 5 6 7 8

$ (' #para_div button '). Click (function () {var $CN = $ (this). Next (),//$ (this). HTML ($CN. Is (": visible"))? ' Show ': ' Hidden '); (this). CSS ($CN. Is (": visible"))? {"Background": "url (images/btn_arrow_down.png) no-repeat"}: {"Background": "url (images/btn_arrow_up.png) no-repeat" }); $CN. Toggle (' fast '); });

I hope this article will help you with your jquery programming.