скольжение вверх и вниз по div анимирует его содержимое

Question

$('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, и вы увидите - некоторые unknown верхнее поле или отступы анимируются без моего намерения. Содержимое wrap должно быть исправлено, и только сам wrap должен анимироваться, т.е. открываться и закрываться.

Answer 1

Кажется, ваша проблема вызвана методом .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>