jQuery - находит CSS в нижней части div при запуске, а не во время анимации при наведении

0

Я нахожу значение CSS "bottom" для каждого из этих div с классом "полки-info-text". Каждый из этих разделов находится внутри полки.

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

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

Пожалуйста, сообщите, где я ошибаюсь. Благодарю.

var $itemBottom = null;
$('.shelf-item').hover(function() {
    $itemBottom = $(this).find('.shelf-info-text').css('bottom');
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});
Теги:
animation

3 ответа

1
Лучший ответ

Изменение: после повторного чтения вопроса здесь будет решение, которое получит дно и сохранит его в атрибуте данных.

// we loop through all the shelf items and set a data attribute to keep track of it.
$('.shelf-item').each(function(){
    $item = $(this).find('.shelf-info-text');
    $itemBottom = $item.css('bottom');
    $item.data('bottom', $itemBottom);
});

$('.shelf-item').hover(function() {
    $itemBottom = $(this).find('.shelf-info-text').data('bottom');
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': '0px'}, 300);
}, function() {
    $(this).find('.shelf-info-text').stop().animate({ 'bottom': $itemBottom}, 300);
});
Поделиться
  • 0
    Я не думаю, что вы понимаете, что я ищу. Анимация работает отлично, она просто находит нижнее значение, а не должно. В идеале, я бы хотел, чтобы это значение находилось при загрузке страницы и никогда больше не сохранялось. Однако я не знаю, как это работает (в).
  • 0
    @JakeHills не могли бы вы добавить свою разметку на скрипку? Ps: я думаю, что я получил то, что вы ищете, и, возможно, есть решение, дай мне минутку, чтобы напечатать это.
Показать ещё 2 комментария
1

Я слишком поздно на вечеринку (потому что я отвлекся на эту скрипку). Мой подход такой же, как @Patsy, но я избегаю цикла .each() чтобы установить data-bottom, просто установив его, если он еще не существует:

var $el = null;
$('.shelf-item').hover(function() {
    $el = $(this).find('.shelf-info-text');
    $el.data('bottom',($el.data('bottom') || $el.css('bottom'))).stop().animate({ 'bottom': '0px'}, 300);
}, function() {
    $el = $(this).find('.shelf-info-text');
    $el.stop().animate({ 'bottom': $el.data('bottom')}, 300);
});
Поделиться
  • 0
    Немного поздно да .. но дает вам +1 за рабочий пример - ура :)
0

Вы можете сохранить исходное нижнее значение с помощью jQuery.data(). Тогда ваша функция может проверить, было ли это значение сохранено и никогда не пересчитывать дно (избегая проблемы с средней анимацией).

Поделиться
  • 0
    Именно то, что я печатал: D

Ещё вопросы

Сообщество Overcoder
Наверх
Меню