JQuery висел шкала снизу

Question

JQuery висел шкала снизу

0

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

Я пытаюсь сделать эффект зависания на UL, который влияет на ссылку в пределах одного из UL LI.

Мой текущий код выглядит следующим образом:

$("ul.punchlines").hover(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});

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

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

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

mobius 20 янв. 2014, в 23:54

Источник

0

Вы пробовали позиционировать абсолютный light-grey-gradient и устанавливать bottom на 0 но позиционировать относительно родительского контейнера? Если бы вы могли подготовить скрипку, это очень помогло бы.
otinanai 20 янв. 2014, в 22:57

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Вы пробовали позиционировать абсолютный light-grey-gradient и устанавливать bottom на 0 но позиционировать относительно родительского контейнера? Если бы вы могли подготовить скрипку, это очень помогло бы.

Omidam81 · Accepted Answer · 2014-01-20T21-12-00.000Z

См. JQuery hover api:

http://api.jquery.com/hover/

также убедитесь, что ваш "li" имеет абсолютную позицию.

$("ul.punchlines").hover(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});

Спасибо за намного более чистый код, я получил это благодаря этому.