Jquery扩展和滚动在同一时间

Jquery expand and scroll at the same time

本文关键字：同一时间 滚动 扩展 Jquery      更新时间：2023-09-26

我想知道以下是否可能。目前，我有一些代码，在页面底部使用jquery打开一个DIV。它就像这样简单:

$("#country_slide").slideToggle();

然后我有一些示例代码滚动到页面的底部(只是一个例子):

$('html, body').animate({scrollTop:$(document).height()}, 'slow');

问题是这个打开的div在展开时将会离开页面的底部，所以我不仅希望它打开，而且希望页面向下滚动以显示现在打开的div。

我只能弄清楚如何完全展开div，然后滚动到可用区域。我希望两个进程同时运行，而不是一个接一个地运行。

这是可能的jquery，如果是，谁能解释一下如何。

查看此小提琴:JsFiddle

我调用事件，显示(show, fadeIn, slideDown等)和滚动到元素，当$(文档)准备好了。

我将显示功能的计时器以毫秒为单位设置为3秒，并将滚动设置为4秒。您可以根据需要调整这些时间，以显示您认为合适的隐藏元素。

CSS 

 #container{height:850px;background-color:red;width:300px;text-align:center; }
 #bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;}
HTML 

 <div id="container" style="height:1500px;background-color:red;width:300px;">
      <p>I'm opening a div and scrolling below</p>
      <div id="bottomDiv" class="tempCss">Bottom Div</div>
 </div>
脚本

   $(document).ready(function(){
       $("#bottomDiv").slideDown(3000);
       $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){
       });  
   });
相关文章：