动画不透明度隐藏/显示

Question

so, what is the different between:

A) (work for me)

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

...

B (doesn´t work for me)

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

eg http://jsbin.com/iquwuc/6/edit#preview

Answer 1

When you call hide() that's roughly equivalent to .css('display', 'none') , so later changing opacity back to 1 changes the opacity of a hidden element. And that's why show() works - because it makes the element block again.

Answer 2

It is because you are show and hiding, instead of animating the opacity. (Kinda obvious :P ).

Edited code : http://jsbin.com/iquwuc/11/edit#preview

You can make the following amendments to use the opacity setting:

Add the following css:

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

And change your script to this:

$(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();
                  });   
        });
});

Basically what is happening is:

On hover, you are SHOW'ing the dropdown with opacity 0, then animation happens to set margin and opacity. and on hover-out, animating opacity to 0 and HIDE'ing it again.

Answer 3

in the css file or inline. Set the id or class to

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

in css

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

that way when calling the animate opacity from jQuery it will function other wise your just calling an animation that is already at 1 opacity

Answer 4

I would use dojo bibliothek for it ( http://dojotoolkit.org/reference-guide/dojo/animateProperty.html ). You will find in DOJO more than only animating functionality, this framework offers a lot of components to solve big area of different problems.