All geek questions in one place

How to make it smoother with switching ("slow")

I have the following code that works, but it gets a little nervous at the end of each switching action.

Will it be smoother if I switch the paragraph?

I am trying to get a paragraph, but I do not know how to do it.

Can anybody help me?

Thanks in advance.

<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>

+3
source share
4 answers

To crawl to work, jQuery must guess the possible height of the element. When this becomes wrong, you see a jump when the animation ends and the element is allowed to find its natural height.

p, JQuery, , .

, p, , .morepara div , , .

+5

.children('p') <p> <div> , .slideToggle('slow') .toggle, <div> , , , .

0

, . , , div, div "none" "block". stanch , , , .

<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>
0
source

Not sure if you have the answer to this question, but with that, a DIV that switches to a specific WIDTH really worked for me. tested in FF and IE 7-8

0
source

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

More articles:


All Articles