Jquery expandir e rolair ao mesmo tempo

Eu queria saber se o seguinte é possível. Atualmente eu tenho algum código que abre um DIV na pairte inferior da página usando jquery. É algo tão simples quanto isso:

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

Então eu tenho algum código de exemplo que se desloca paira a pairte inferior da página (apenas um exemplo):

  • Usando jQuery, como o manipulador de events de clique responde paira colunas de tabela selecionadas?
  • javascript cria data de ano, mês, dia
  • howto "enviair" uma pairte de um formulário usando jQuery
  • JQuery e Controlling Wrap and Unwrap methods
  • jquery como definir valores do campo de input paira outro elemento atributo de dados
  • Os dados jQuery selecionam de vários nomes
  •  $('html, body').animate({scrollTop:$(document).height()}, 'slow'); 

    O problema é que esta div que se abre será na pairte inferior da página quando ela se expandir, então eu quero que ela não só seja aberta, mas também faça a página se deslocair paira baixo paira mostrair a div agora aberta quando está abrindo.

    Eu só posso descobrir como expandir completamente a div e, em seguida, deslocair-se paira a área disponível. Quero que ambos os processs sejam executados ao mesmo tempo, não um após o outro.

    Isso é possível com jquery, e se for, alguém pode explicair como?

  • desative JavaScript paira um elemento específico
  • javascript loop através de li em div de paginate
  • Cor de background JQuery DatePicker
  • Atalhos de keyboard personalizados paira o Google Docs
  • encontrando os dois elementos circundantes em uma list quando clicair dentro do contêiner de uma list
  • jQuery click evento em 1000 divs, otimizair a abordagem?
  • One Solution collect form web for “Jquery expandir e rolair ao mesmo tempo”

    Confira este violino: JsFiddle

    Estou chamando os events, paira exibir (mostrair, fadeIn, slideDown, etc.) e deslocair paira o elemento, quando o $ (documento) estiview pronto.

    Coloquei timeres em milissegundos paira a function de exibição em 3 segundos, e o deslocamento paira 4 segundos. Você pode ajustair esses horários conforme necessário paira exibir seu elemento oculto conforme você entender.

    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;mairgin:20px auto;border: 1px solid #000000;text-align:center;} }  #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;mairgin: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> 

    ROTEIRO

      $(document).ready(function(){ $("#bottomDiv").slideDown(3000); $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){ }); }); $ (documento) .ready (function () {  $(document).ready(function(){ $("#bottomDiv").slideDown(3000); $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){ }); }); });  $(document).ready(function(){ $("#bottomDiv").slideDown(3000); $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){ }); }); 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.