That won't work, it makes both buttons disappear and reappear instead of the effect I want which is to make the hover button appear when the mouse is in and disappear when the mouse is out.
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Brandon Aaron Sent: Wednesday, July 25, 2007 5:17 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Toggling an objects visiblty without show and hide The hover method takes two functions. One for the mouseover and one for the mouseout. Here are the docs for the hover method: http://jquery.bassistance.de/api-browser/#hoverFunctionFunction Here is the proper way to code the example. $("#showPic").hover(function() { $("#hover, #normal").addClass("hidden"); }, function() { $("#hover, #normal").removeClass("hidden"); }); -- Brandon Aaron On 7/25/07, Mitchell Waite <[EMAIL PROTECTED]> wrote: Leave it to Michael to leave the most indelible mark. I now a see the subtle issues with "this" In fact I have a whole a new take on jQuery since listening to Michael about "this" and trying to get my tediously simple little toggle to work. It actually started in Javascript and was a lot more code, so I appreciate that it's so more streamlined. However the abstraction leaves me a bit uneasy. Given there is no simple way to tell a DOM "this" from a jQ "this", I ended up doing this: /* from Rob */ function toggleVis(element) { if (element.style.visibility == 'hidden') { element.style.visibility = 'visible'; } else { element.style.visibility = 'hidden'; } } Contrasting this with Michael G's code jQuery.fn.toggleVis = function() { return this.each( function( index, element ) { if (element.style.visibility == 'hidden') { element.style.visibility = 'visible'; } else { element.style.visibility = 'hidden'; } }); }; I think Rob's makes more sense to a beginner. ---- called by this---- $("#toggle").click(function() { var $cat = $('#cheshireCat'); if ($cat.length) { toggleVis($cat[0]); } }); This was advice from Rob, using a JS function and calling it with from jQuery and sending it a DOM. I leave this here for the newbie's on this list, as I know this is self evident to most people here. Now to muddle things either further. I decided that I might be able to use jQuery's 'hover' to deal with the whole issue of flipping visibility and so I made this: .hidden {display: none;} .showPic { position:absolute; width:94px; height:31px; z-index:1; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#showPic").hover(function() { $("#hover, #normal").toggleClass("hidden"); }); }); </script> </head> <body> <div id="showPic"><img id="hover" src="images/B_hover.gif" class="hidden" /> <img id="normal" src="images/b_normal.gif" /> </div> </body> </html> Ya think that could be more simple. It works right? Check it out, it does something much different then what I expected. http://www.whatbird.com/wwwroot/3statebutton_2.html So is hover not a good solution? Mitch -----Original Message----- From: jquery-en@googlegroups.com [mailto: <mailto:jquery-en@googlegroups.com> [EMAIL PROTECTED] On Behalf Of Michael Geary Sent: Wednesday, July 25, 2007 10:10 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Toggling an objects visiblty without show and hide Rob, I think you left out the return statement that you meant to put in. :-) (Outstanding explanation, BTW!) For clarity, it could be: jQuery.fn.toggleVis = function() { this.each(function() { if (this.style.visibility == 'hidden') { this.style.visibility = 'visible'; } else { this.style.visibility = 'hidden'; } }); return this; };
