如何添加淡入淡出效果到以下jQuery幻灯片功能？(How to add fade effect to a following jQuery slide function?)

如何添加淡入淡出效果到以下jQuery幻灯片功能？(How to add fade effect to a following jQuery slide function?)

我有这个幻灯片功能http://jsfiddle.net/g7LwM/1/

我如何添加淡入淡出效果？ 所以，当它滑落时，它会淡入，当它滑回去时，它会淡出？

重要提示：我注意到大多数答案都使用切换过渡，这与我的幻灯片切换不同。 切换和幻灯片有不同的转换！

I have this slide function http://jsfiddle.net/g7LwM/1/

How can I add fade effect to it? So while it is sliding down it fades in and when it is sliding back up it fades out?

Important: I noticed that most answers use toggle transition, it is different from slide transition I have. Toggle and slide have different transitions!

最满意答案

你需要动画： http : //jsfiddle.net/manseuk/g7LwM/7/

$(document).ready(function () { $("#trigger").click(function () { $("#test").animate({opacity: 'toggle', height: 'toggle'}); }); })

您也可以添加持续时间：

$("#test").animate({opacity: 'toggle', height: 'toggle'},'slow');

You need animate : http://jsfiddle.net/manseuk/g7LwM/7/

$(document).ready(function () { $("#trigger").click(function () { $("#test").animate({opacity: 'toggle', height: 'toggle'}); }); })

You can add in duration too :

$("#test").animate({opacity: 'toggle', height: 'toggle'},'slow');