jquery 在一个功能中切换和淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2625887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery toggle and fade in one function?
提问by tony noriega
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>
回答by Konstantin Kalbazov
Since jQuery 1.4.4 there is a new function for this called .fadeToggle()
从 jQuery 1.4.4 开始，有一个名为的新函数 .fadeToggle()
回答by pixeline
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:
您可以使用 toggle() 在一组函数之间交替。因此，如果您希望元素每隔一次单击淡入和淡出，请使用切换控件 2 个功能：淡入和淡出。像这样：
$('a#biz-blue').toggle(function() {
$('#business-blue').fadeIn('slow');
return false;
},
function() {
$('#business-blue').fadeOut('slow');
return false;
});
回答by Nick Craver
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():
你的问题让我有点困惑，因为.toggle()基本上是显示/隐藏切换，但你有淡入淡出。我最接近的猜测是你想要一个淡入淡出切换，在这种情况下你可以使用animate()：
$('#business-blue').animate({opacity: 'toggle'}, 800);
Another option you may want is the slide up and down using .slideToggle()like this:
您可能需要的另一个选项是使用.slideToggle()如下方式上下滑动：
$('#business-blue').slideToggle('slow');
回答by cronoklee
Much better to write a custom function at the bottom of jquery.js:
在 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');
回答by Fawad Ghafoor
Very simple
很简单
$("a#biz-blue").live('click',function(){
$('#business-blue').slideToggle(200);
});
回答by R0MANARMY
It also looks like someone wrote a plugin for thistwo years ago.
看起来两年前有人为此写了一个插件。
