jQuery показать / скрыть содержимое при наведении

0

Я немного борюсь с функцией show/hide jQuery.

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

http://jsfiddle.net/bwilkins/np8qD/ - заимствован из (NeaWm)

Это прекрасно, за исключением того, что я не могу использовать абсолютное позиционирование в своем макете. Мне нужно относительное позиционирование. Когда я это делаю, результат DIV отскакивает из-за проблем с контейнерами, которые я предполагаю. Какие-нибудь подсказки о том, как обойти это?

.animalcontent {
    position:absolute;
    top:100px;
}

p.animal {display:inline-block;padding-right:20px;}

Другой jsfiddle, который почти работает для меня, это:

http://jsfiddle.net/YdPm5/40/

Это идеальный вариант, за исключением того, что я действительно хотел бы, чтобы шоу/скрыть было перенесено, как fadein/fadeout.

Любое решение прекрасно, если я могу получить постепенное исчезновение без абсолютного позиционирования. Я ценю любую помощь.

  • 0
    Что-то вроде этого? jsfiddle.net/robertrozas/YdPm5/47
  • 0
    Спасибо! Я добавил значение времени в fadeIn(1000) и fadeOut(1000) и это, кажется, прекрасно работает. Спасибо @RobertRozas
Показать ещё 1 комментарий
Теги:
hover
fadein
fadeout

3 ответа

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

Используйте что-то вроде этого:

$('#item-wrapper a').mouseenter(function () {
console.log($(this).data('panel'));
if ($(this).data('panel')) {
    $('.panel').hide();
    $('#' + $(this).data('panel')).fadeIn();
}
});
$('#item-wrapper').mouseleave(function () {
$('.panel').fadeOut();
});

Рабочая скрипка здесь: http://jsfiddle.net/robertrozas/YdPm5/47/

Поделиться
0

Что-то вроде этого? вы можете использовать fadeIn (время) и fadeOut (время)

[http://jsfiddle.net/YdPm5/46/][1]




[1]: http://jsfiddle.net/YdPm5/46/
Поделиться
  • 0
    Спасибо @ Хорхе Зуверза
0

Я просто изменил некоторые анимационные вызовы на fades, см. JsFiddle: http://jsfiddle.net/YdPm5/49/

$('#item-wrapper a').mouseenter(function () {
    console.log($(this).data('panel'));
    if ($(this).data('panel')) {
        $('.panel').hide();
        $('#' + $(this).data('panel')).fadeIn();
    }
    });
$('#item-wrapper').mouseleave(function () {
    $('.panel').fadeOut();
});
Поделиться
  • 0
    Благодарю. Похоже, я понял это сейчас. Ценится @DrCord.
  • 0
    Рад помочь! Заплатите это SO, как только вы узнаете больше или с вашими специализациями кодирования, кроме js / jquery.
Показать ещё 1 комментарий

Ещё вопросы

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