Problema con efecto jQuery

madman_18 · #1 (**permalink**) 20/02/2013, 05:12

Hola a todos!

Estoy haciendo una nueva web con la que quiero mostrar/ocultar divs según pulsen en el menú.... Ahora bien el efecto que me hace es un poco "extraño".

Me explico:

Si el div mide 960px de ancho y el efecto que hago es un .hide('clip'), lo que me hace es como "achicar" el div, y luego hacer el efecto.

Os pongo el código si queréis comprobarlo ya que no lo tengo alojado en ningún sitio.
HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Mi Prueba</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" type="text/css" href="css.css"/>
        <link rel="stylesheet" type="text/css" href="js/vegas/jquery.vegas.css"/>
        <link href='http://fonts.googleapis.com/css?family=Merienda|Handlee' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/backstretch.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
        <script type="text/javascript" src="js/vegas/jquery.vegas.js"></script>
               
        <script type="text/javascript">
            $(window).ready(function(){
                $.backstretch('imagenes/fondo.jpg');
                $('#menu a').click(function(){
                    $($(this).attr('name')).hide('clip',1500,function(){
                          $.backstretch('imagenes/fondo2.jpg');    
                    });
                });             
            });            
        </script>
    </head>
    <body>
       <header id="cabecera">
            <section id="logo">
                <article id="nombre-empresa">Verdesol</article>
            </section>
            <nav id="menu">
                <ul>
                    <a href="#" name="#intro"><li>Nosotros</li></a>
                    <a href="#" name="#servicios"><li>Servicios</li></a>
                    <a href=""><li>Productos</li></a>
                    <a href=""><li>Contacto</li></a>                    
                </ul>
            </nav>
       </header>        
            <article id="intro" class="contenido">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dolor massa, et laoreet eros. Cras feugiat malesuada lobortis. Aliquam leo purus, aliquet nec euismod nec, ultrices eu orci. Curabitur sit amet lorem id tellus tempus faucibus. Integer vestibulum accumsan dui, non rutrum justo fringilla quis. Mauris ac nisl eu nisi accumsan commodo. Nunc vel justo ac mi fermentum fermentum et at diam. Nulla pretium, ligula sed cursus lobortis, odio quam mollis nisl, non mollis risus purus id nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc eros, fermentum ac mattis vitae, laoreet tristique justo. Donec sit amet aliquet lacus. Nulla justo augue, luctus non commodo nec, varius vel urna. Aliquam at dolor ac ligula dapibus accumsan. Etiam tincidunt, lacus sed egestas egestas, dui diam congue ipsum, euismod semper tortor orci et turpis. Pellentesque blandit sapien ut ante pellentesque aliquam. In auctor, neque sed molestie egestas, eros justo lobortis elit, vel faucibus lacus ipsum vel tellus.
Duis leo arcu, gravida egestas volutpat in, porttitor a mauris. Pellentesque arcu arcu, congue at aliquam nec, pulvinar in orci. Sed ligula lacus, dictum eu posuere sed, euismod et lectus. Donec rutrum ultrices nisl, sit amet laoreet arcu rhoncus vitae. Sed sit amet nibh justo, id molestie erat. Aliquam vitae lacus orci. Vestibulum turpis dui, varius ut sollicitudin sed, dictum ac nunc. Sed ultrices, sem sit amet porta ultricies, enim ligula ultricies tellus, quis aliquam lorem quam vel metus.
            </article>
    </body>
</html>

CSS:

Código CSS:

Ver original@charset "utf-8";
/* Reseteamos los tags HTML y HTML5  */ 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figure, figcaption, hgroup,menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;} 
article, aside, canvas, figure, figure img, figcaption, hgroup,footer, header, nav, section, audio, video {display: block;}
a img {border: 0;}
root {display: block;}
 
html,body{width:100%;height:100%;font-family: 'Handlee', san-serif;}
a{text-decoration:none;color:#FFF;}
/*CABECERA ===================================================================*/
#cabecera{width:100%;height:60px;position:fixed;top:0;left:0;
          background: url('js/vegas/overlays/04.png') repeat,url('imagenes/cabecera.png') repeat;
          z-index: 99;color:#FFF;}
#logo{width:215px;height:162px;position:absolute;left:0;background:url('imagenes/logo.png') no-repeat;}
#nombre-empresa{width:auto;height:auto;position:absolute;top:0;left:220px;font-family: 'Merienda',sans-serif;font-size: 30pt;}
#menu{width:auto;height:auto;position:absolute;right:0;bottom:2px;text-transform: capitalize;font-size: 16pt;}
#menu li{display:inline-block;margin-right: 20px;}
#menu a:hover li{border-bottom: 2px solid #C0D103;}
/*CONTENIDO===================================================================*/
.contenedor{width:100%;height:100%;}
#barra-central{width:100%;height:165px;position:absolute;left:0;top:50%;margin-top:-100px;z-index: 90;background:url('imagenes/barra-central.png') repeat-x;}
.contenido{width:960px;min-height:600px;height: auto;position:absolute;left:50%;top:90px;margin:-10px 0 0 -480px;
           z-index:98;background:url('imagenes/contenido.png') repeat;
           color:#FFF;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;padding-bottom:20px;}

En cuanto lo comprobéis sabréis lo que digo jeje. ¿Por qué puede ser eso?

Gracias de antemano!!!