После завершения JQuery slideUp () остальная часть содержимого переходит на место - PullRequest
Новая
       10

После завершения JQuery slideUp () остальная часть содержимого переходит на место

0 голосов
/ 12 июля 2009

Я пытаюсь сделать простой JQuery слайд информационного сообщения. Проблема в том, что сообщение выдвигается чисто, и анимация выглядит великолепно, но div ниже того, который я выдвигаю, остается на месте, пока анимация не закончится, а затем просто переходит на место. Я хочу, чтобы следующий div ускорился, когда мое сообщение исчезло.

Я пытался изменить почти все аспекты CSS, которые я могу (например, удалить позицию: относительный, открывать контейнер и т. Д.), Но, похоже, ничего не работает.

Вот Javascript: 

$(function() {
    setTimeout(function(){
        $('.flash').slideUp('slow');
      }, 1000);
});

Вот HTML: 

<div class='page-content'>
  <div class='flash'>
    <div class='notice'>I'm testing the flash</div>
  </div>
  <div class='data-table'>
    ... The rest of the page ...
  </div>
</div>

Вот соответствующий CSS: 

.page-content {
  width: 95%;
  float: left;
  padding: 25px 2.5% 0;
}
.flash {
  background-color: #dcffb9;
  border: 1px solid #78b73f;
  border-bottom: 1px solid #d9d9d9;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 0;
  position: relative;
}
.flash .notice {
  background: url(../images/flash-notice-bg.gif) no-repeat 20px 50%;
  border-bottom: 1px solid #78b73f;
  padding: 20px 0 20px 70px;
}

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

4 голосов
/ 12 июля 2009

Проблема в полях: 15px; на элементе .flash. Убедитесь, что вы установили поля и отступы на 0.

Это потому, что slideUp работает, уменьшая высоту до 0, но это не меняет поля. Поэтому, когда элемент закончил скольжение вверх, он все еще имеет запас в 15 пикселей. Последний шаг - скрыть элемент, в этом месте поле тоже исчезает, и вы видите прыжок.

Вы можете оставить поле на .flash .notice

2 голосов
/ 12 июля 2009

В заключение проблема заключается в том, что я включаю файл javascript поддержки JQuery for Rails. Без него скользит нормально.

JRails по каким-то причинам переопределяет slideUp и slideDown. В JRails подана ошибка, которая решает эту проблему: http://code.google.com/p/ennerchi/issues/detail?id=43. Я сделал, как предложил автор ошибок, и переименовал версии функций слайдов в JRails, и теперь мой материал работает нормально.

0 голосов
/ 05 ноября 2009

Это известная ошибка в jrails ... удалите функции slideUp / slideDown из jrails и PRESTO! Надеюсь, это будет исправлено в следующем выпуске jrails.

...