mover el botón hacia abajo al contraer expandir

Así que tengo el código para hacer que mi lista se despliegue y retroceda. Ahora quiero que el botón lo acompañe en ambos sentidos. Me las arreglé para bajarlo, pero retroceder no tan bien. Estaba tratando de agregar el botón en un div común con la lista, pero no funcionó porque el botón desapareció después de hacer clic a tiempo. Así que realmente quiero que sea lo más estilístico posible, sería genial agregar un efecto de cámara lenta y un efecto de carga si es posible.

aquí está el código de nuevo

html

<div id="right-column-sidebar">
    <ol>
        <li><a href="#">Title 1</a></li>
        <li><a href="#">Title 2</a></li>
        <li><a href="#">Title 3</a></li>
        <li><a href="#">Title 4</a></li>
        <li><a href="#">Title 5</a></li>
        <li><a href="#">Title 6</a></li>
        <li><a href="#">Title 7</a></li>
        <li><a href="#">Title 8</a></li>
        <li><a href="#">Title 9</a></li>
        <li><a href="#">Title 10</a></li>
        <li><a href="#">Title 11</a></li>
        <li><a href="#">Title 12</a></li>
        <li><a href="#">Title 13</a></li>
        <li><a href="#">Title 14</a></li>
        <li><a href="#">Title 15</a></li>
        <li><a href="#">Title 16</a></li>
        <li><a href="#">Title 17</a></li>
        <li><a href="#">Title 18</a></li>
        <li><a href="#">Title 19</a></li>
        <li><a href="#">Title 20</a></li>
    </ol>
</div>

CO

div#right-column-sidebar{
    position: absolute; 
    right: -140px;
}

div#right-column-sidebar ol{
    position:absolute; 
    right: 150px;
    margin: 10px 0 10px 10px;
    font-size: 20px;
    color: red;
    list-style-type:none
}

div#right-column-sidebar ol li {
    list-style-type:none;
    margin: 10px 0 10px 0; 
    border-bottom: 1px dotted grey; 
    width: 200px; display: block;
}

div#right-column-sidebar ol li a{
    font-size: 60%; color: blue;margin-left: 20px
}
div#right-column-sidebar ol li:nth-child(11){
    margin-left:0;
}      
div#right-column-sidebar ol li a:hover{
    text-decoration: underline;
}

a.button {
    border: 1px solid lightgrey;no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

Jquery

$(function(){
    $('div#right-column-sidebar ol li:gt(9)').hide();
    $('a.button').click( function() { 
        $('div#right-column-sidebar ol li:gt(9)').toggle(); 
        $('a.button').addClass('change-height');
    });
});

preguntado el 27 de julio de 12 a las 22:07

deberías mover tu código a un jsfiddle -

¿Por qué no posicionar absolutamente su botón en la parte inferior, de modo que se mueva con el final de su lista? -

1 Respuestas

¿Quieres algo similar a esto - http://jsfiddle.net/7CxG8/ ?

Quité el position: absolute from the ol por lo que el botón se dio cuenta/respondió al cambio de dimensiones del ol.

Para obtener el "efecto de cámara lenta", simplemente puede pasar un número como argumento de la función de alternancia de jquerys (3000 = 3s); funciona, pero no es el mejor efecto que podría obtener. Normalmente creo mis propios efectos con transiciones/animaciones css.

Respondido 27 Jul 12, 23:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.