我如何使用jquery将隐藏元素从0不透明度滑动到1

时间:2011-03-29 06:01:32

标签: javascript jquery opacity slidedown

我有一个像下面的可乐使用jquery原型库:

        new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
        new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 

此代码强制imageDataContainer元素从0不透明度向下滑动到1不透明度。

如何使用jquery.com网站上新下载的jquery库实现上层代码?

slideDown的语法是这样的: http://www.w3schools.com/jquery/eff_slidedown.asp

我知道slideDown和fadeTo函数在jquery中是如何工作的,但我怎样才能像上层代码一样将它们组合起来?

我测试下面的代码 - 但你不能改变不透明度 - - DURING - - 切换:

          $('#lightbox-container-image-data-box').animate({
            opacity: 0,
            height: 'toggle',
            opacity: 1
          }, 400, function() {
            // Animation complete.
          });

感谢4关注

1 个答案:

答案 0 :(得分:3)

使用animate()。使用动画,您可以为元素上的任意数量的属性设置动画。

在此处查看以下代码的演示:http://jsfiddle.net/chrisramakers/8ewEp/

$('#book').hide();
$('#book').animate({
  opacity: 'toggle',
  height: 'toggle'
});