Tengo una oculta el panel de la izquierda lado de la pantalla que se desliza dentro de la vista en el clic de un ‘ficha’ situada en el lado izquierdo de la pantalla. Necesito el panel para deslizarse sobre la parte superior de la actual contenido de la página, y tengo la tab para moverse con él. y por lo tanto son absolutamente posicionado en el css. Todo funciona bien, aparte de que necesito la ficha (y por lo tanto la ficha de contenedor) para mover hacia la izquierda con el panel, cuando él se manifieste, con lo que parece ser pegado al lado derecho del panel. Su relativamente simple cuando se utiliza flotadores, pero por supuesto, esto afecta al diseño de los contenidos existentes, de ahí que el posicionamiento absoluto. He tratado de animar la posición de la izquierda del panel contenedor (véase el documentado jquery función), pero no puedo conseguir que funcione.

Este es un ejemplo del código original que he cambiado, ¿cómo puedo obtener el botón de la pestaña de diapositiva así?

http://www.iamkreative.co.uk/jquery/slideout_div.html

Mi HTML

<div><!--sample page content-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et 
    </p>
</div>

<div id="panel" class="height"> <!--the hidden panel -->
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
    </div>  
</div>

<!--if javascript is disabled use this link-->
<div id="tab-container" class="height">
    <a href="#" onclick="return()">
        <div id="tab"><!-- this will activate the panel. --></div> 
    </a>
</div>

Mi jQuery

$(document).ready(function(){

$("#panel, .content").hide(); //hides the panel and content from the user

$('#tab').toggle(function(){ //adding a toggle function to the #tab
    $('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px

    //THIS NEXT FUNCTION DOES NOT WORK -->
    function() {
        $('#tab-container').animate({left:"400px"} //400px to match the panel width
        });

    function() {
        $('.content').fadeIn('slow'); //slides the content into view.
        });  
},

function(){ //when the #tab is next cliked
    $('.content').fadeOut('slow', function() { //fade out the content 
        $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
    });
   });

  });

y este es el css

#panel {
position:absolute;
left:0px;
top:50px;
background-color:#999999;
height:500px;
display:none;/*hide the panel if Javascript is not running*/
}

#panel .content {
width:290px;
margin-left:30px;
}

#tab-container{
position:absolute;
top:20px;
width:50px;
height:620px;
background:#161616;
}

#tab {
width:50px;
height:150px;
margin-top:100px;
display:block;
cursor:pointer;
background:#DDD;
}

Muchas gracias

OriginalEl autor Matt | 2010-04-19

2 Comentarios

  1. 9

    Empecé de nuevo a partir de cero, y de hecho, leer el jQuery docs jeje. He puesto el panel y el botón en un div con posición absoluta, flotando, tanto de izquierda. Dio el contenedor de una negativa la posición de la izquierda, a continuación, poner un jQuery toggle de acción en el botón.

    $('#button').toggle(function() {
    
        $('#slider').animate({
            left: '+=200'
            }, 458, 'swing', function() {
    
            //Animation complete. CALLBACK?
    
        });
    
    }, function() {
    
        $('#slider').animate({
            left: '-=200'
            }, 458, 'swing', function() {
    
            //Animation complete. CALLBACK?
    
        });
    
    });

    OriginalEl autor

  2. 0

    Me topé con este post cuando se intenta realizar la misma tarea.

    Por desgracia, la respuesta de Matt ya no funcionará con la última versión de jQuery. En el momento en que Matt respuesta fue escrito, jQuery tenía dos .alternar funciones. En el momento en que estoy escribiendo esto el utilizado en su respuesta ha sido desaprobado. Si Matt se utiliza el código, todo div simplemente desaparecerá, botón y todo. (Y si eres como yo que va a ser muy confuso hasta que cavar en la documentación de la api y averiguar sobre el cambio)

    Yo era capaz de conseguir mis funcionalidad de trabajo con el siguiente código:

    HTML:

    <div id="siteMap">
     <div id="mapButton">Site Map</div>
     <div id="theMap">[The Site Map Goes Here]</div>
    </div>

    CSS (sé que esto no es muy limpio, sin embargo):

    #siteMap {
      width:500px;
      position:fixed;
      left:-500px;
      top:157px;
      display:block;
      color:#FFF;
      z-index:2;
      opacity: 0.95;
    }
    #siteMap #mapButton {
      display:block;
      color:#333;
      background-color:#ACACAC;
      padding:2px 5px;
      height:20px;
      width:70px;
      text-align:center;
      position:relative;
      left: 100%;
      margin-top:80px;
      cursor:pointer;
    
      transform-origin:     0% 0%;
      -ms-transform-origin:     0% 0%;
      -webkit-transform-origin: 0% 0%;
      -moz-transform-origin:        0% 0%;
      -o-transform-origin:      0% 0%;
    
      transform:           rotate(-90deg);
      -ms-transform:     rotate(-90deg); 
      -webkit-transform: rotate(-90deg); 
      -moz-transform:    rotate(-90deg); 
      -o-transform:      rotate(-90deg);
    }
    #siteMap #theMap {
      width:100%;
      height:350px;
      background-color:#666;
      margin-top:-104px;
    }

    Y por último el JavaScript:

    <script type='text/javascript'>
      $(document).ready(function() {
        $('#mapButton').click(function() {
          var mapPos = parseInt($('#siteMap').css('left'), 10);
          if (mapPos < 0) {
            $('#siteMap').animate({
              left: '+=500'
              }, 458, 'swing', function() {
                //Animation complete.
              });
          }
          else {
            $('#siteMap').animate({
              left: '-=500'
              }, 458, 'swing', function() {
                //Animation complete.
            });
          } 
        });
      });
    </script>

    Esperemos que si usted vino aquí desde Google mi post va a ser de mucha ayuda 🙂

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here