Я пытаюсь анимировать div, используя jquery, проблема заключается в том, что анимация не "распространяется" на своих детей (НЕ ДЕЙСТВИТЕЛЬНО УВЕРЕН, ЕСЛИ Я ЕСМЬ ИСПОЛЬЗОВАТЬ ПРАВИЛЬНЫЙ СРОК, Я ИЗМЕНИЮ "). Пожалуйста, взгляните на мой demo, когда вы наводите курсор на зеленом поле, он выполняет код, но когда вы нажимаете на образец текста, он отключается.. поэтому это приводит к повторному запуску анимации. Надеюсь, я объяснил это правильно. Спасибо заранее ребята.
Кроме того, может ли кто-нибудь поделиться своим опытом о том, как они обрабатывают javascript или его библиотеку, например jquery?.. Я действительно хочу быть хорошим в этой конкретной области.
$('.js_boxFeature').on(" mouseenter", function () {
$(this).animate({
"top": "-20px"
}, "fast");
});
$('.js_boxFeature').on(" mouseout", function () {
$(this).animate({
"top": "0"
}, "fast");
});
здесь моя скрипка
Имейте в виду, что вы можете использовать обработчик hover
/вывода для псевдо-событий:
$('.js_boxFeature').hover(function (e) {
$(this).stop().animate({
top: e.type === "mouseenter" ? "-20px" : 0
}, "fast");
});
Или используя только псевдо-класс CSS :hover
:
.js_boxFeature {
position:absolute;
width:200px;
height:200px;
background:green;
top:0;
-webkit-transition: top 200ms linear;
transition: top 200ms linear;
}
.js_boxFeature:hover {
top:-20px;
}
Проблема, как представляется, использование MouseOut случае вместо MouseLeave
$('.js_boxFeature').on("mouseleave", function () {
$(this).stop(true).animate({
"top": "0"
}, "fast");
});
Демо: скрипка