Cómo hacer que sea más suave, con alternancia ( 'lento')

StackOverflow https://stackoverflow.com/questions/990622

  •  13-09-2019
  •  | 
  •  

Pregunta

Tengo el siguiente código que funciona, pero se vuelve un poco nervioso al final de cada acción de palanca.

¿Será más fácil si i Mueva el párrafo?

Estoy tratando de obtener el párrafo, pero no sé cómo hacerlo.

Puede alguien ayudarme por favor?

Gracias de antemano. 

<head>

<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
display:none;
}

.togglebutn {
color: #900;
background-color: #FFF; 
}

</style>

</head>

<body>

<div id="section1">
<div class="toppara"><p>Content 1.</p> 

</div>

<div class="morepara">
<p>
Content 2. 
</p>

</div>

<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 1 -->

<!-- section 2 -->
<div id="section2">
<div class="toppara"><p>Content 3.</p> 
</div>


<div class="morepara">
<p>
Content 4.
</p>


</div>

<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 2 -->

<script language="javascript" type="text/javascript">
$(function() {
    $('.togglebutn a').click(               
        function(){ 
        var $parentpara = $(this).parent().prev();

        $parentpara.toggle('slow');
    });

});


</script>

¿Fue útil?

Solución

Para puertas correderas a trabajar jQuery tiene que adivinar la altura final del elemento. Cuando lo hace mal se ve un salto cuando la animación termina y se permite que el elemento de encontrar su altura natural.

Su problema es causado por los márgenes de la etiqueta p que ocupan espacio en el cálculo original de jQuery, pero se derrumbó cuando la animación completa.

La solución es o bien eliminar los márgenes de las etiquetas p, para tratar de evitar el colapso suceda dando a la .morepara div una altura explícita, un borde o un poco de acolchado superior / inferior, aunque ambas opciones tienen efectos secundarios indeseables .

Otros consejos

puede utilizar .children('p') con el fin de acceder

de

, pero sugerimos que pruebe el método .slideToggle('slow') en lugar de .toggle, siendo su aplicación al elemento
. En general, se adapta bien para el tipo de cosas que usted espera.

No estoy seguro de lo que está causando la fluctuación. Mi conjetura es que es un efecto causado por el montaje del párrafo en el div cuando el atributo de visualización de la div se cambia de 'ninguna' a 'bloque'. He aplicado la sugerencia de stanch y llegar a un ejemplo de trabajo que parece funcionar un poco mejor. 

<html>
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
}

.togglebutn {
color: #900;
background-color: #FFF; 
}

</style>

</head>

<body>
    <div id="section1">
        <div class="toppara">
            <p>Content 1.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 2. 
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

    <div id="section2">
        <div class="toppara">
            <p>Content 3.</p> 
        </div>
        <div class="morepara">
            <p>
            Content 4.
            </p>
        </div>
        <p class="togglebutn">
            <a>Show/Hide</a>
        </p>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$('document').ready( function (){
    $('.morepara p').hide();
    $('.togglebutn a').click(
        function(){
            var parentpara = $(this).parent().prev().children();
            parentpara.toggle('normal');
        }
    );
});
</script>
</body>
</html>

No está seguro de si tiene una respuesta a esto todavía, pero dando a los del DIV que están siendo activadas o un ancho específico realidad trabajó para mí. comprobado en FF & IE 7-8

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top