我做了两个按钮 .square
与两个有关<div>
.
如果我点击一个按钮 .square
: 一个相关的<div>
一个出现,另一个消失。
事情是:
我在 ( bellow_div
)
之后显示的内容在 #c1
的高度时发生了奇怪的转变。或 #c2
如何平滑地上下滑动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>
关于javascript - 当尺寸改变时平滑地向上或向下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38833190/