jquery toggle and fade in one function?
I was wondering if toggle() and fadeIn() could be used in one function...
i got this to work, but it only fades in after the second click... not on first click of the toggle.
$(document).ready(function() {
$('#business-blue').hide();
$('a#biz-blue').click(function() {
$('#business-blue').toggle().fadeIn('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('a#biz-blue-hide').click(function() {
$('#business-blue').hide('fast');
return false;
});
});
<a href="#" id="biz-blue">Learn More</a>
<div id="business-blue" style="border:1px soild #00ff00; background:#c6c1b8; height:600px; width:600px; margin:0 auto;开发者_运维知识库 position:relative;">
<p>stuff here</p>
</div>
Since jQuery 1.4.4 there is a new function for this called .fadeToggle()
Jquery fadeToggle
You can use toggle() to alternate between a set of functions. So if you want an element to fadeIn and fadeOut every other click, have a toggle control 2 functions: the fadeIn and the fadeOut. Like this:
$('a#biz-blue').toggle(function() {
$('#business-blue').fadeIn('slow');
return false;
},
function() {
$('#business-blue').fadeOut('slow');
return false;
});
Your question confuses me a bit, because .toggle()
is basically a show/hide toggle, but you have fadeIn. The closest guess I have is that you want a fade-toggle, in which case you can do this using animate()
:
$('#business-blue').animate({opacity: 'toggle'}, 800);
Another option you may want is the slide up and down using .slideToggle()
like this:
$('#business-blue').slideToggle('slow');
Much better to write a custom function at the bottom of jquery.js:
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
Then you can call it like this:
$('#hiddenElement').fadeToggle('fast');
It also looks like someone wrote a plugin for this two years ago.
Very simple
$("a#biz-blue").live('click',function(){
$('#business-blue').slideToggle(200);
});
精彩评论