Accordion HELP

**kakashi** · 10-02-2011, 16:55

Ciao ragazzi,
sto creando un accordion

codice:

var olddiv = "1";

    $(document).ready(function(){

        $("div[name^='a']").each(function() {

			$(this).click(function(){

				iddiv = this.id;

                $("#hom"+iddiv).animate({left: "+=600px",opacity:1,width: "760px",backgroundColor:'#ffffff'},function(){$(this).addClass('add')});

				$("#hom"+olddiv).animate({left: "-=600px",width: "0px"},function(){$(this).removeClass('add')});

				

				olddiv = iddiv;

			});

		});
    });

ma il movimento non è ancora fluido, come posso migliorarlo?
Vi invio anche html in modo da poterlo vedere completo

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    
    <style>
body{
        margin:0 auto;
        font-family: "Trebuchet MS",Serif;
        background:#660000;
        font-size:1em;
    }
    a{
        text-decoration: none;
        color: #000
    }
    #content{
        background: url(../images/background.jpg) no-repeat fixed top;
        width: 960px;
        height: 600px;
        margin: 0 auto;
        position: relative;
    }
    #navi{
        padding-top: 134px;
        width: 940px;
        margin: 0 auto;
    }
    img{border:0px;}

    #orari{
        position:absolute;
        right:10px;
        top:118px;
        color: #fff;
        font-size: 0.7em;
    }
        #orari a{
            color: #fff;
            text-decoration: none;
        }

    .titolo{
        float:left;
        width: 30px;
        height: 440px;
        background: #eee;
        margin-left:5px;
    }
    .upmouse{
        background:#ccc
    }
    .active{
        background: #fff;
    }

    .content{
        display:none;
        float:left;
    }
    .space{
        padding:5px;
    }

    /*BOX VISUONE CONTENUTO*/
    .add{
        margin-left:5px;
        display:inline;
        width:760px;
        background:#fff;
        height: 440px;
    }

    /*SLIDE IMAGE*/
    #slider li,#slider{width:760px}
    #slider li,#slider ul{margin:0;padding:0;list-style:none}
    #slider li,#slider{height:440px;overflow:hidden}
    span#prevBtn a,span#nextBtn a{position:absolute;top:320px;width:49px;height:47px;}
    span#prevBtn a{background:url(../images/frecciaSx.png);}
    span#nextBtn a{left: 865px;background:url(../images/frecciaDx.png);}

    /* FOOTER */
    #footer{
        padding-top: 5px;
        height: 25px;
        font-size: 0.583em;
        text-align: center;
        color: #fff;
    }
        #footer a{
            color: #fff;
            text-decoration: none;
        }</style>

    
    <!--
    <script language="javascript" type="text/javascript" src="js/library.js"></script>
    -->
    
    <script type="text/javascript">
    var olddiv = "1";
    $(document).ready(function(){
        $("div[name^='a']").each(function() {
			$(this).click(function(){
				iddiv = this.id;
                $("#hom"+iddiv).animate({left: "+=600px",opacity:1,width: "760px",backgroundColor:'#ffffff'},function(){$(this).addClass('add')});
				$("#hom"+olddiv).animate({left: "-=600px",width: "0px"},function(){$(this).removeClass('add')});
				
				olddiv = iddiv;
			});
		});
    });
    </script>
</head>

<body>

<script type="text/javascript">
    $(document).ready(function() {
        $().piroBox_ext({piro_speed : 700,bg_alpha : 0.5, piro_scroll : true});
    });
</script>


<div id="content">

    
    <div id="navi">

        <div id="orari">Orari | Prenotazioni</div>

        <div name="a1" id="1" class="titolo active">[img]images/menuP.png[/img]</div>

        <div id="hom1" class="content add">
            <div class="space" style=" overflow:auto;">
                Ciao Ciao
            </div>
        </div>

        <div name="a2" id="2" class="titolo">[img]images/listinoP.png[/img]</div>
        <div id="hom2" class="content">
            <div class="space" style=" overflow:auto;">
                Ciao Ciao
            </div>
        </div>

        <div name="a3" id="3" class="titolo">[img]images/serviziP.png[/img]</div>
        <div id="hom3" class="content">
            <div class="space" style=" overflow:auto;">
                Ciao Ciao
            </div>
        </div>

        <div name="a5" id="5" class="titolo">[img]images/galleryP.png[/img]</div>
        <div id="hom5" class="content">
            <div id="slider">
                <ul>
    				[*][img]images/slide/image001.jpg[/img]
    				[*][img]images/slide/image002.jpg[/img]
    				[*][img]images/slide/image003.jpg[/img]
				[*][img]images/slide/image004.jpg[/img]
    				[*][img]images/slide/image005.jpg[/img]
    				[*][img]images/slide/image006.jpg[/img]
				[*][img]images/slide/image007.jpg[/img]
    				[*][img]images/slide/image008.jpg[/img]
    			[/list]
            </div>
        </div>

        <div name="a4" id="4" class="titolo">[img]images/contattiP.png[/img]</div>
        <div id="hom4" class="content">
            <div class="space" style=" overflow:auto;">
                Ciao Ciao
            </div>
        </div>

    </div>
    

    
    <div style="clear: both;"></div>
    <div id="footer">
        <span style="display: block;">Pizzeria Maruzzella - Viale Regina Elena, 48 - 65122 Pescara - 085.4429337</span>
        <span style="display: block;">credits: kude.it, Mirko Di Labio</span>
    </div>
    

</div>

</body>
</html>

Grazie in anticipo dell'aiuto

**kakashi** · 16-02-2011, 10:22

ragazzi per favore un piccolo consiglio

Discussione: Accordion HELP

Strumenti discussione

Ricerca discussione

Visualizza

Accordion HELP

Permessi di invio