Hi,

I've got a function:

function closeNav(navName, navHandler, navList){
        $(navList).hide("slow",function(){
                $(navName).addClass("external-nav-on");
                $(navHandler).addClass("closed");
        });
        $(navHandler).toggle(function(){
                $(navHandler).removeClass("closed");
                $(navList).fadeIn("slow");
        },function(){
                $(navList).fadeOut("slow",function(){
                        $(navHandler).addClass("closed");
                });
        });
}

called from within another function from a function call.

prepareNav("#external-nav", "#external-nav h2", "#external-nav ul");

function prepareNav(navName, navHandler, navList) {
        closeNav(navName, navHandler, navList);
}

The function fades out (closes) the nav, and puts an alternative
background and styling on the header of the nav, on loading the page
and on click to close/open the nav.

The nav is a header with a series of nested lists as follows:

<div id="external-nav"> <!-- class="external-nav-on" javascript enabled -->
        <h2>Nav Title</h2> <!--  class="closed" on closed -->
                <ul>
                        <li class="section-1"><h3>Section one</h3>
                                <ul>
                                        <li>
                                                <h4>Sub Section 1</h4>
                                                <ul>
                                                        <li><a href="#">Item 
1</a></li> 
                                                        <li><a href="#">Item 
2</a></li> 
                                                        <li><a href="#">Item 
2</a></li> 
                                                        <li><a href="#">Item 
3</a></li> 
                                                        <li><a href="#">Item 
4</a></li>         
                                                </ul>
                                        </li>   

[... Plus six more list items each with a single list and item in them...]

</ul>
</li>
</ul>
</div>

This works fine in IE7/Firefox, but takes > 10 seconds with poor/no
animation in IE6, and causes artefacts to remain on screen in Safari,
which disappear/go back to normal when moused over.

Any ideas why this is happening? My work around is to sniff for IE6
and Safari and give them a simple show()/hide(), with no animation.

Thanks,

Dan.

-- 
Daniel Eastwell

Portfolio and articles:
http://www.thoughtballoon.co.uk

Blog:
http://www.thoughtballoon.co.uk/blog

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to