jQuery/CSS related problem
I am new to jQuery, and this is the page I'm currently developing.
http://90.230.237.71/gandhi.html (Hope that works now :P)
I'm testing your tips on page gandhi2.html
When I hit "Show/hide gallery" all the images are first opened vertically, and later they are corrected to their horizontal placement, that's the problem. They should be horizontal right away! I don't know if this 开发者_C百科is due to jQuerys slideDown or entirely CSS-related, but the code is all there for you.
Initally, the images are set to display: none, perhaps they then are invisibly stored vertically. Then slideDown is performed and last, the CSS-attributes are changed to "display: inline". Perhaps I need to change execution order of slideDown and setting the CSS-attributes... but how?
I NEED HELP... for many reasons, but I only want you to help me with this one ;)
And also, please actually look at the code before making any assumptions. It's all there in the code.
EDIT
Has got it working by changing one line in jQuery. Line 5738 I changed from this.elem.style.display = "block"; to this.elem.style.display = "inline-block";
Do I need to use my own modified version of jQuery or can I simply override that value from my html-page? Perhaps I should start a new thread for that question...
They are showing horizontally to me when I hit the "Show/hide gallery" link. Also, try hiding with jquery in ready
handler rather than using display:none
in CSS so that jquery remembers their initial display settings eg block
, etc.
$(function()){
$('.gallery_container img').hide();
};
slideDown
sets the display
CSS property to block
; which you seem to have realised, as you change it to inline
in your slideDown
callback.
Instead of animating each image individually, you should wrap them in a block level element (the ul.navlist
?), and slideDown()
that instead.
In your stylesheet, try setting the li
elements to display: inline-block
. Then at the start of your jQuery, use $(/*li elements*/).hide()
.
EDIT:
Found the problem: http://dev.jquery.com/browser/trunk/jquery/src/fx.js#L269
EDIT 2:
Fixed: http://www.jsfiddle.net/aUAAm/
精彩评论