Задержка изменения размера Jquery

Question

Задержка изменения размера Jquery

0

Почему в моем коде есть такая страшная задержка. Я хочу, чтобы этот div скользил и выдвигался на основе размеров окна. Но каждый раз есть задержка. Это никогда не бывает такой же длины. Должен ли я использовать функцию тайм-аута? Или что-то не так с моим кодом?

<!DOCTYPE html>
<html>
<head><style type="text/css">div {
  background-color: brown;
  width: 100px;
  height: 100px;
  position: relative;
  display: none;
  left: -120px;
}
</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>

  <div style="display: block; left: 0px;" id="navg">Chocolate!</div>


<script>var navg = $("#navg");
var wind = $(window);

wind.load(function() {
  if (wind.width() > 900) {
    navg.show();
    navg.animate({
      left: "0px"
      }, 1000);
  } 
});

wind.resize(function() {
  if ((wind.width() < 900) && (navg.is(":visible"))) {
    navg.animate({"left":"-120px"}, 1000, function() {
      $(this).hide();
    });
  } else if ((wind.width() >= 900) && (navg.is(":hidden"))) {
    navg.show(function() {
      navg.animate({"left":"0px"}, 1000); 
    });
  }
});
</script></body>

Вот ссылка на код в Liveweave: http://liveweave.com/HWpQUe Попробуйте изменить размер, чтобы лучше понять, что я имею в виду.

fluke4 13 май 2014, в 20:55

Источник

3

Кажется, работает как предназначено для меня. Под задержкой вы имеете в виду скорость квадрата медленная? Если это так, просто уменьшите число 1000 (три примера этого в вашем коде здесь) до 200 или 400 и посмотрите, что работает для вас.
Hamza Kubba 13 май 2014, в 18:52
0

Спасибо за ваш пост, Хамза, но я имею в виду, что если я изменю размер окна несколько раз, он не сработает. Иногда я изменяю размер окна и должен ждать 30 секунд, прежде чем появится всплывающее окно.
fluke4 14 май 2014, в 19:44
0

Ах, то, что происходит там, это то, что у вас есть несколько анимаций, бегущих друг над другом и, возможно, мешающих друг другу закончиться. Возможно, вы захотите использовать api.jquery.com/finish перед началом каждой анимации, чтобы остановить любую предыдущую анимацию.
Hamza Kubba 15 май 2014, в 03:21
0

Спасибо, что работал чудесно!
fluke4 15 май 2014, в 15:40
0

Хамза, я не знаю, как пометить твой комментарий как ответ. Я новичок и пока не могу, но это определенно решило мою проблему. Благодарю.
fluke4 15 май 2014, в 15:49
0

Я добавлю комментарий как ответ ... Я не думаю, что комментарии могут быть обновлены до ответов (или я не знаю как).
Hamza Kubba 15 май 2014, в 22:00

Показать ещё 4 комментария

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Кажется, работает как предназначено для меня. Под задержкой вы имеете в виду скорость квадрата медленная? Если это так, просто уменьшите число 1000 (три примера этого в вашем коде здесь) до 200 или 400 и посмотрите, что работает для вас.
Спасибо за ваш пост, Хамза, но я имею в виду, что если я изменю размер окна несколько раз, он не сработает. Иногда я изменяю размер окна и должен ждать 30 секунд, прежде чем появится всплывающее окно.
Ах, то, что происходит там, это то, что у вас есть несколько анимаций, бегущих друг над другом и, возможно, мешающих друг другу закончиться. Возможно, вы захотите использовать api.jquery.com/finish перед началом каждой анимации, чтобы остановить любую предыдущую анимацию.
Хамза, я не знаю, как пометить твой комментарий как ответ. Я новичок и пока не могу, но это определенно решило мою проблему. Благодарю.
Я добавлю комментарий как ответ ... Я не думаю, что комментарии могут быть обновлены до ответов (или я не знаю как).

Hamza Kubba · Accepted Answer · 2014-05-15T19-34-00.000Z

Что происходит, так это то, что у вас несколько анимаций, работающих друг над другом, и прекращение друг друга. Вероятно, вы хотите использовать api.jquery.com/finish перед началом каждой анимации, чтобы остановить любую предыдущую анимацию (ы).