CODEWITHSUNDEEP
javascriptjqueryhideopacityshow
ogni
ogni

Reputation: 327

Animate opacity hide / show

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"}); ...

e.g http://jsbin.com/iquwuc/6/edit#preview

Upvotes: 2

Views: 8346

Answers (4)

Marc Uberstein
Marc Uberstein

Reputation: 12541

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.

Upvotes: 2

Damien Keitel
Damien Keitel

Reputation: 786

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

Upvotes: 1

Igor
Igor

Reputation: 566

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.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47677

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.

Upvotes: 2

Related Questions