[jQuery] toggleSlide and toggleFade
I've done two functions to slideUp/slideDown or fadeIn/fadeOut
depending on whether the element is visible.
$.fn.toggleSlide = function(s)
{
return this.each(function(){
var d = $.getCSS(this,"display");
if ( d == "none" || d == '' )
$(this).slideDown(s);
else
$(this).slideUp(s);
});
}
$.fn.toggleFade = function(s)
{
return this.each(function(){
var d = $.getCSS(this,"display");
if ( d == "none" || d == '' )
$(this).fadeIn(s);
else
$(this).fadeOut(s);
});
}
However, toggleFade does not quite work properly (toggleSlide is
fine). It shows on the first click, then hides, but on the third click
it starts to show, then hides straight away.
HTML code:
<a id="toggle" href="#">Toggle</a>
<div id="divtest">
Vivamus sagittis lacus eget nunc. Proin pulvinar, velit ut
ullamcorper pretium, purus neque cursus augue.
</div>
JavaScript:
$(window).load(function()
{
$("div#divtest").hide();
$("a#toggle").click(
function()
{
$("div#divtest").toggleFade("slow");
}
);
}
What I have also noticed with toggleSlide is when I use 'each' as well
to select a text box, the selection is lost when the slide has
finished (problem does not occur in IE ironically):
HTML code:
<a id="toggle" href="#">Toggle</a>
<div id="divtest">
Vivamus sagittis lacus eget nunc. Proin pulvinar, velit ut
ullamcorper pretium, purus neque cursus augue.
<input id="text" value="foo" />
</div>
JavaScript:
$(window).load(function()
{
$("div#divtest").hide();
$("a#toggle").click(
function()
{
$("div#divtest").toggleSlide("slow").each(function()
{
var text = $("input#text", this).get(0);
text.select();
});
}
);
}
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/