Распространение событий Jquery?

0

Я пытаюсь анимировать 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");
});

здесь моя скрипка

  • 1
    демо-версия не прилагается ... также вместо размещения ссылки на демо-версию ... добавьте соответствующий код к вопросу
  • 0
    о да, я сейчас редактирую извините.
Показать ещё 3 комментария
Теги:
javascript-events
animation

2 ответа

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

Имейте в виду, что вы можете использовать обработчик hover/вывода для псевдо-событий:

DEMO

$('.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;   
}

DEMO CSS

Поделиться
  • 0
    вау, я видел образец CSS, я знаю, что пытался сделать это раньше, но не тренировался для меня. Можете ли вы поделиться с нами некоторыми советами / советами, чтобы быть действительно хорошим в этом? Я пришел с точки зрения "графика / веб-дизайнер". я действительно ищу способы быть хорошими в этом.
  • 0
    Лучший ресурс ИМХО: css-tricks.com сделано отличным парнем (я имел в виду сделано отличными парнями;))
Показать ещё 2 комментария
4

Проблема, как представляется, использование MouseOut случае вместо MouseLeave

$('.js_boxFeature').on("mouseleave", function () {
    $(this).stop(true).animate({
        "top": "0"
    }, "fast");
});

Демо: скрипка

Поделиться
  • 1
    Я бы просто добавил stop () для лучшей обработки поведения
  • 1
    @ А. Вольф да :)
Показать ещё 1 комментарий

Ещё вопросы

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