jQuery: как анимировать два элемента без столкновения друг с другом - PullRequest
Новая
       12

jQuery: как анимировать два элемента без столкновения друг с другом

1 голос
/ 24 января 2012

Я пытаюсь заставить таблицу 100% ширины "скользить", чтобы показать "панель" позади нее.

Вот jsFiddle с примером того, где я нахожусь, и происходящим "столкновением": http://jsfiddle.net/z93se/2/ (с помощью пользовательского интерфейса jQuery)

Нажмите на строку таблицы, чтобыувидеть, как происходит переход.Во время анимации таблица «всплывает» под новой расширенной панелью.Затем после анимации он возвращается влево, где и должен.

Как заставить их одновременно скользить и сохранять свои позиции?

PS - Я в порядке сперемещение, элементы которого имеют отступы и плавающие до тех пор, пока конечный результат работает.

Обновление:

Два других моих требования: 1) Таблица должнабыть 100% ширины перед анимацией.2) Панель на стороне, которая «выдвигается», должна иметь фиксированную ширину.

Обновление 2:

Новый jsFiddle, который показывает ширину таблицы, используяграницу (так с ней легче играть).http://jsfiddle.net/z93se/14/

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

Ответы [ 2 ]

2 голосов
/ 28 января 2012

Наконец-то все заработало. Пришлось использовать функцию animate () и передать обратный вызов, чтобы скрыть div, когда это будет сделано.

Смотрите это jsFiddle: http://jsfiddle.net/744BL/

Примечания. Использование идентификаторов в качестве селекторов приводило к некоторым проблемам, которые не возникали при переключении на классы.

1 голос
/ 24 января 2012

Этот CSS будет делать

html, добавить контейнер с идентификатором task-details-container в task-details

CSS 

#task-list table {
    width: 75%;
}
.details-active {
    padding-right: 0px;
}
#task-details-container {
    width: 25%;
    float: right;
}
#task-details {
    width: 100%;
    padding: 0;
    display:none;
}

Я надеюсь, что это то, что вы хотели, пожалуйста, посмотрите CSS, который я изменил

** Обновлено

...