divを上下にスライドさせてコンテンツをアニメーション化する

2020-08-02 javascript jquery css

$('button').on('click', function(){
    $('#wrap').slideToggle();
  $('#inpsearch').focus();
});
.wrap{
display:none;
background:gold;
}
.inpsearch{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='wrap' id='wrap'>
<br>
<input type='text' class='inpsearch' id='inpsearch'>
<br>
</div>

buttonをクリックするとbuttonbutton - 不明な上部マージンまたはパディングが意図せずにアニメーション化します。
wrapの内容は修正する必要があり、 wrap自体だけがアニメーション化する必要があります。つまり、開閉します。

Answers

あなたの問題は.focus()メソッドによって引き起こされているようです。トグルが完了した後に.focus()呼び出して、 .focus()ようなコールバックを提供してください:

$('#wrap').slideToggle(function() {
  $('#inpsearch').focus();
});

$('button').on('click', function() {
  $('#wrap').slideToggle(function() {
    $('#inpsearch').focus();
  });
});
.wrap {
  display: none;
  background: gold;
}

.inpsearch {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='wrap' id='wrap'>
  <br>
  <input type='text' class='inpsearch' id='inpsearch'>
  <br>
</div>

Related