jquery's method of determining whether an element is visible _jquery

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:

$ (' #para_div button '). Click (function () {  
   if ($ (). Next (). Is (": visible")) {        
    //$ (). 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:

$ (' #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:

$ (' #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.