Как реализовать mouseleave в jquery

Question

Как реализовать mouseleave в jquery

У меня небольшая проблема со сдвигом в jquery. На hover (наведите курсор мыши) мне нужно, чтобы мой элемент списка навигации отображал его содержимое, сползая вниз и по нажатию мыши он должен скользить вверх.

HTML:


     
       Time Table
      
    


<div id = "hovercontent">
     Contents 1 
</div>

Javascript:

<script type="text/javascript">
$(document).ready(function(){

    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $("#hovercontent").mouseleave(function(){
        $(this).slideUp("slow");
    });

 });
</script>

Здесь проблема заключается в том, что когда я наводил в списке, div сворачивается вниз, но только после того, как я нахожусь на div и выхожу из навигатора, div раздвигается. Мне нужно, чтобы div соскальзывал, даже если я выхожу из списка, не входя в div. Как это может быть сделано?

0

добавлено 28 Декабрь 2012 в 05:50 автор Kowshik отредактировано 08 Июнь 2013 в 06:34

Просмотры: 7

источник

ro nl ja fr de kk uz be tr uk

У меня есть. Только одно нужно изменить, и это точно ищет. Когда я нахожусь на временной шкале, отображается содержимое 1. Но только после того, как я войду в контент и выйду из него, контент ускорится. но мне нужно, чтобы контент 1 скользил вверх, даже если я выйду из расписания без трогательного контента1.

добавлено 28 Декабрь 2012 в 06:16, автор Kowshik, источник

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

добавлено 28 Декабрь 2012 в 06:18, автор Kowshik, источник

6 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Мини-курс по Angular и NgRx

16 видео-уроков

Инструменты успешного делегирования

Автор: Евгений Попов

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Супер After Effects 2

От команды Video-Smile

автор thecodejack · Answer 1 · 2012-12-28T05:57Z

Лучше использовать mouseover и mouseout сделает это за вас ..

$("#hovercontent").bind("mouseout", function() {
     $(this).slideUp("slow");
});

0

добавлено 28 Декабрь 2012 в 05:57 автор thecodejack

источник

да, я согласен ....

добавлено 28 Декабрь 2012 в 09:11, автор thecodejack, источник

используйте .on() вместо .bind() для более гибкой привязки событий.

добавлено 28 Декабрь 2012 в 06:08, автор Munchies, источник

автор Nandu · Answer 2 · 2012-12-28T06:05Z

попробуй это

$(document).ready(function(){
   $("#mousehover").mouseover(function(){
      $("#hovercontent").slideDown("slow");
   });
   $("#hovercontent ,#mousehover").mouseleave(function(){
       $('#hovercontent').slideUp("slow");
   });

});

автор Jai · Answer 3 · 2012-12-28T06:01Z

Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/

$("#mousehover").hover(function() {
    $("#hovercontent").slideDown("slow");
}, function() {
    if (!$("#hovercontent").hover()) {
        $("#hovercontent").slideUp("slow");
    }
});
$("#hovercontent").mouseleave(function() {
    $(this).slideUp("slow");
});

вы можете попробовать его в скрипке.

0

добавлено 28 Декабрь 2012 в 06:01 автор Jai

источник

У меня есть. Только одно нужно изменить, и это точно ищет. Когда я нахожусь на временной шкале, отображается содержимое 1. Но только после того, как я войду в контент и выйду из него, контент ускорится. но мне нужно, чтобы контент 1 скользил вверх, даже если я выйду из расписания без трогательного контента1.

добавлено 28 Декабрь 2012 в 06:20, автор Kowshik, источник

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

добавлено 28 Декабрь 2012 в 06:20, автор Kowshik, источник

да получил это сейчас.

добавлено 28 Декабрь 2012 в 06:28, автор Jai, источник

автор Munchies · Answer 4 · 2012-12-28T06:05Z

try it with event.type on 'hover' You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave

$(document).ready(function(){
    $('#mousehover').on('hover',function(event){
        switch(event.type){
            case 'mouseenter': $("#hovercontent").slideDown("slow");
                break;
            case 'mouseleave': $("#hovercontent").slideUp("slow");
                break;
        }
    });
});

автор Skynet · Answer 5 · 2012-12-28T06:04Z

Ознакомьтесь с http://www.quirksmode.org/js/events_mouse.html . В обработчиках событий проверьте, соответствует ли связанная таргетинг, как описано здесь. Используйте console.log в обработчиках событий, чтобы отслеживать, что происходит. К сожалению, я не могу помочь дальше, не имея CSS для классов, которые вы используете ... возможно, вы могли бы предоставить тестовый файл в JSBin на http : //jsbin.com/ ?

автор twksos · Answer 6 · 2012-12-28T06:03Z

Я рекомендую использовать класс:

HTML:


    
       Time Table
    

<div id = "hovercontent" class="menu1">
    Contents 1 
</div>

JS:

<script>
$(document).ready(function(){
    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $(".menu1").mouseout(function(){
        $("#hovercontent").slideUp("slow");
    });
});
</script>