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:[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;
};
