Question

我使用此功能部分显示隐藏的div，它正常工作，但突然出现，不好看，我希望它轻轻向下滚动，我可以在代码中添加些什么？

function show() {
document.getElementById("show").style.display = 'block';
}

<div>
<button type="button" class="btn btn-primary" onclick="show();">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>

Answer 1

有几种方法...使用您现有的代码（和普通js），我将结合使用navigator和max-height来使文本“向下滚动”： / p>

transition

function show() {
document.getElementById("show").style.maxHeight = '50px';
}

Answer 2

如果您使用的是jQuery，则可以使用.slideDown（“ slow”）;

https://www.w3schools.com/jquery/jquery_slide.asp

$(document).ready(function(){
  $("#thebtn").click(function(){
    $("#show").slideDown("slow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary" id="thebtn">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>

Answer 3

您可以使用Jquery。我用这个：

$("#show").fadeIn(1000);
$("#show").fadeOut(1000);

$(document).ready(function(){
  $("#thebtn").click(function(){
     $("#show").fadeIn(1000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary" id="thebtn">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>

添加平滑滚动功能onclick getelementbyid

3 个答案: