jQuery hide (), delay () и clearTimeout () не работают должным образом

Question

jQuery hide (), delay () и clearTimeout () не работают должным образом

0

Я хочу, чтобы пользователь .userNames над .userNames, .details должен выскакивать после небольшой задержки, а также хочет .details show hide() когда мышь покидает .userNames, после небольшой задержки тоже. Это работает. Теперь я хочу .details чтобы остаться, если мышь входит в него, но она все еще исчезает.

Замечание. Хорошим примером этого являются имена пользователей Facebook, когда их наводит курсор мыши.

Код HTML:

<div class = 'posts'>
<p class = 'userNames'> Yax </p>
<div class = 'details'> 
    <p> Full Name </p>
    <p> Birthday </p>
    <p> Age </p>
</div>
</div>

JQuery:

$(document).ready(function(){
    $('.details').hide();
    $(document).on('mouseenter', ".userNames", function () {
        var $this = $(this);
        $.data($this, 'timer', setTimeout(function(){
            $this.parents('.posts').find('.details').slideDown(100);
        },900));
    });
    $(document).on('mouseleave', ".userNames", function () {
        var $this = $(this);
        $this.parents('.posts').find('.details').delay(800).hide(100);
    });
    $(document).on('mouseenter', ".details", function () {
        var $this = $(this);
        var $dataTime = $this.parents('.posts').find('.userNames');
        clearTimeout($.data($dataTime, 'timer'));
    });
    $(document).on('mouseleave', ".details", function () {
        var $this = $(this);
        $this.hide();
    });
});

Заранее спасибо.

Yax 20 янв. 2014, в 08:57

Источник

2

попробуйте jsfiddle.net/arunpjohny/rvaDV/1
Arun P Johny 20 янв. 2014, в 07:11
0

также попробуйте jsfiddle.net/arunpjohny/rvaDV/2
Arun P Johny 20 янв. 2014, в 07:17
0

@ArunPJohny: Спасибо, loadz. Это работало как волшебство. Но какой из двух лучше?
Yax 20 янв. 2014, в 07:26

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

1

Вот решение, которое работает и упрощает ваш jQuery:

$(document).ready(function(){
    $('.details').hide();
    $('.userNames').mouseenter(function () {
        $('.details').delay(900).slideDown(100);
    });

    $('.userNames').mouseleave(function () {
        $('.details').delay(800).hide(100);
    });

    $('.details').mouseenter(function () {
        $(this).stop(true, true);
    });

    $('.details').mouseleave(function () {
        $(this).hide(100);
    });
});

Попробуйте здесь.

Blundering Philosopher 20 янв. 2014, в 05:32

Ещё вопросы

также попробуйте jsfiddle.net/arunpjohny/rvaDV/2
@ArunPJohny: Спасибо, loadz. Это работало как волшебство. Но какой из двух лучше?

Arun P Johny · Accepted Answer · 2014-01-20T05-51-00.000Z

Пытаться

$(document).ready(function () {
    $('.details').hide();
    $(document).on('mouseenter', ".userNames", function () {
        var $this = $(this),
            $post = $this.closest('.posts');
        $post.data('timer', setTimeout(function () {
            $post.find('.details').stop(true, true).slideDown(100);
        }, 900));
    });
    $(document).on('mouseleave', ".userNames", function () {
        var $this = $(this),
            $post = $this.closest('.posts');
        clearTimeout($post.data('timer'));
        $post.data('timer', setTimeout(function () {
            $post.find('.details').stop(true, true).delay(800).hide(100);
        }, 900));
    });
    $(document).on('mouseenter', ".details", function () {
        var $this = $(this),
            $post = $this.closest('.posts');
        clearTimeout($post.data('timer'));
        $this.stop(true, true)
    });
    $(document).on('mouseleave', ".details", function () {
        var $this = $(this);
        $this.hide();
    });
});

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