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"}); ...
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.
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.
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.