Jquery is an unwanted jump effect (this happens often, and I don't understand why)

In the above code, we:

1) Click "Category A", and then, 2) click on one of the bold letters.

You will notice that, expanding, and the movement should be smooth, it jumps closer to the end of the display process. (It seems that when he finds <p>he is jumping);

What could be causing this behavior?

Here is its associated code: code:

$('#btCategoriaA').click(function() {
            $('#btCategoriaA').toggleClass('selecionado');
            $('#listaCategoriaA').slideToggle('slow', function() {
           });
        });


        $('#btCategoriaB').click(function() {
            $('#btCategoriaB').toggleClass('selecionado');
            $('#listaCategoriaB').slideToggle('slow', function() {
            });
        });

        $('#btCategoriaC').click(function() {
            $('#btCategoriaC').toggleClass('selecionado');
            $('#listaCategoriaC').slideToggle('slow', function() {
           });
        });



        function mostraDesafio(num){
            $('#detalheDesafio'+num).slideToggle('slow');
        }

Should I provide more information, please just let me know.

K. Regards, MEM

+3
source share
2 answers

Give the element a .detalheDesafiospecific width in CSS. That should fix it.

.detalheDesafio {
    width: 308px;
}

, , .slideToggle() -.

+4

, <p> , .slideToggle(). .

: http://api.jquery.com/slideToggle/

0

Source: https://habr.com/ru/post/1774701/


All Articles