当尺寸变化时，平滑地向上或向下滑动

smoothly slide up or down when sizes change

本文关键字：平滑 变化      更新时间：2023-09-26

我让两个按钮.square与两个<div>相关联。
如果我点击一个按钮.square:一个相关的<div>出现，而另一个消失。

问题是:
当#c1或#c2的高度发生变化时，我在(bellow_div)
之后显示的内容正在进行奇怪的过渡。

如何在bellow_div和#c1或#c2改变高度时平滑地向上或向下滑动?

$(function(){ // DOM ready shorthand
$('.square:first').css('color', 'red');
                 
$(".square").on("click", function() { 
 
    var id= $(this).attr("contentId");
        $('.square').css('color', ' #ccc');
    $(this).css('color','red');
    $('#details p').fadeOut('fast', function() {
      $(this).html($("#" + id).html()).fadeIn();
    });
});
});
#details{
    width:100%;
    background:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square" contentId="c1">Prochain évenement</div>
<div class="square" contentId="c2">Editorial</div>
<div id="details">
<p>
Jeudi 20 Mars<br>
20h30<br>
                                    
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</p></div>
<div style="display: none" id="c1">
Jeudi 20 Mars<br>
20h30<br>                           
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</div>
<div style="display: none" id="c2">
Saison 2016—2017
</div>
<div class="bellow_div">Here is a text</div>

使用.slideUp()和.slideDown()的jQuery函数

$(function(){ // DOM ready shorthand
$('.square:first').css('color', 'red');
                 
$(".square").on("click", function() { 
 
    var id= $(this).attr("contentId");
        $('.square').css('color', ' #ccc');
    $(this).css('color','red');
    $('#details p').slideUp().fadeOut('fast', function() {
      $(this).html($("#" + id).html()).slideDown().fadeIn();
    });
});
});
#details{
    width:100%;
    background:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square" contentId="c1">Prochain évenement</div>
<div class="square" contentId="c2">Editorial</div>
<div id="details">
<p>
Jeudi 20 Mars<br>
20h30<br>
                                    
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</p></div>
<div style="display: none" id="c1">
Jeudi 20 Mars<br>
20h30<br>                           
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</div>
<div style="display: none" id="c2">
Saison 2016—2017
</div>
<div class="bellow_div">Here is a text</div>

查看此处的the Executing Code When an Animation Ends部分

相关文章：