views:

413

answers:

0

Hi there! I'v been trying to make a simple accordition menu homepage. The link is: http://prorevizija.agenda.si/fileadmin/templates/index.html

The page displays well in firefox 3, IE 7 has some lack in speed, but in Safari and Chrome right after the close animation is performed ( i use 'toggle' to open and close) there is a 'blink' as if Safari displays the whole hidden layer for a millisecond and than hides it again. I've tried everything, from changing the animation types, implementing new code but nothing seems to work. Please help me!

My Javascript code for the animation is:

var temp = 0;
function clearTemp()
{   
    document.getElementById("up_menu_"+temp).setAttribute("class", "");
    document.getElementById("up_menu_"+temp).setAttribute("className", "");
}
function setTemp(elementID)
{
    clearTemp();
    temp=elementID;var element = document.getElementById("up_menu_"+temp);
    element.setAttribute("class", "active"); //For Most Browser
    element.setAttribute("className", "active"); //For IE; harmless to other browsers.
}
function setActiveClass(elementID) 
{
    if(elementID!=temp)
    {   
        if(temp==0)
        $("#menu_item_"+elementID).animate({width:'toggle'},750,function(){alert("End ");});
        else
        {
            $("#menu_item_"+temp).animate({width:'toggle'},750,function(){alert("End ");/*$("#menu_item_"+elementID).animate({width:'toggle'},750);*/});
        }
        setTemp(elementID);
    }
    else
    {
        $("#menu_item_"+temp).animate({width:'toggle'},750,function(){alert("End ");});

        setTemp(0);
    }
}

$(document).ready
(
    function() 
    {
        $("#menu_item_1").hide();
        $("#menu_item_2").hide();
        $("#menu_item_3").hide();

        $('.toggle_menu_item_1').click
        (
            function() 
            {
                setActiveClass(1);                  
            }
        );

        $('.toggle_menu_item_2').click
        (
            function() 
            {
                setActiveClass(2);      
            }
        );

        $('.toggle_menu_item_3').click
        (
            function() 
            {
                setActiveClass(3);      
            }
        );

        $('.toggle_menu_item_4').click
        (
            function() 
            {
                setActiveClass(0);
            }
        );

        $('#up_menu_0').click
        (
            function() 
            {
                setActiveClass(0);
            }
        );
        $('#up_menu_1').click
        (
            function() 
            {
                setActiveClass(1);
            }
        );
        $('#up_menu_2').click
        (
            function() 
            {
                setActiveClass(2);
            }
        );
        $('#up_menu_3').click
        (
            function() 
            {
                setActiveClass(3);
            }
        );
    }
);