Question

所以，有什么不同：

A）（为我工作）

... .animate({opacity: "show", marginTop: "25"}); ...

...

B （对我不起作用）

... .animate({opacity: "1", marginTop: "25"}); ...

例如http://jsbin.com/iquwuc/6/edit#preview

Answer 1

当您致电hide()大致相当于.css('display', 'none')时，稍后将不透明度更改为1会更改隐藏元素的不透明度。这就是为什么show()有效 - 因为它会再次阻止元素。

Answer 2

这是因为你是显示和隐藏，而不是动画不透明度。（有点明显：P）。

已编辑的代码： http://jsbin.com/iquwuc/11/edit#preview

您可以进行以下修改以使用不透明度设置：

添加以下css：

.sub-menu li#access ul {opacity:0; display:none;}

并将您的脚本更改为：

$(document).ready(function(){

    $('.sub-menu').hover(function(){ 
          $('.sub-menu li#access ul').show();
        $('.sub-menu li#access ul').stop().animate({opacity: 1, marginTop: "25"}, 500);
        },
        function() {
                  $('.sub-menu li#access ul').stop().animate({opacity: 0, marginTop: "10"}, 500,function(){
                  $('.sub-menu li#access ul').hide();
                  });   
        });
});

基本上发生的事情是：

在悬停时，您显示的是具有不透明度0的下拉列表，然后动画会设置边距和不透明度。并且在悬停时，将不透明度设置为0并再次隐藏它。

Answer 3

在css文件或内联中。将id或类设置为

内联 - <div id="myid" style="opacity:0;"></div>

在css中

        #myid { opacity: 0; }
        .myclass {opacity: 0; }

当从jQuery调用animate opacity时，它将以其他方式运行，只需调用已经处于1 opacity的动画

Answer 4

我会使用dojo bibliothek（http://dojotoolkit.org/reference-guide/dojo/animateProperty.html）。你会发现在DOJO中不仅仅是动画功能，这个框架提供了很多组件来解决大面积的不同问题。

动画不透明度隐藏/显示

4 个答案: