动画不透明度隐藏/显示

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调用动画不透明度时，它将以其他方式起作用，您只需要调用已经具有1不透明度的动画即可

Answer 4

我会为此使用dojo书目（ http://dojotoolkit.org/reference-guide/dojo/animateProperty.html ）。 在DOJO中，您不仅会发现动画功能，而且该框架提供了许多组件来解决各种不同的问题。