Предложения по использованию этого простого примера jQuery fadeOut () - PullRequest
Новая
       10

Предложения по использованию этого простого примера jQuery fadeOut ()

1 голос
/ 09 января 2012

По сути, когда кто-то наводит мышью на сводку своей корзины, я хочу отобразить div, содержащий более подробную информацию.

Вот рабочий JSFiddle:

http://jsfiddle.net/5JgZp/

Javascript 

    $('#shopping-cart').mouseenter(function () {
        $('#shopping-cart-preview').fadeIn();
    });

    $('#shopping-cart').mouseleave(function () {
        $('#shopping-cart-preview').fadeOut();
    });

HTML 

<div id="user-information">
    <div id="shopping-cart">
        <img src="@Url.Content("~/Public/images/shoppingcart.png")" alt="shopping cart" />
        <p>Products in Shopping Cart: <span class="cart-item-count">2</span> <span class="cart-subtotal">(<span class="cart-subtotal-value">25,54</span>$)</span></p>

        <div id="shopping-cart-preview">
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
        </div>
    </div>

    <div id="action-buttons">
        <a class="loginbutton" href="#">LOGIN</a>
        <a class="registerbutton" href="#">REGISTER</a>
    </div>
</div>

#user-information #shopping-cart {
    float: left;
    position: relative;
    cursor: pointer;
}

CSS 

#user-information #shopping-cart img {
    float: left;
}

#user-information #shopping-cart p {
    color: White;
    display: inline;
    float: left;
    font-family: 'Open Sans',sans-serif;
    font-size: 12px;
    margin-left: 14px;
    margin-top: 10px;
}

#user-information #shopping-cart p span.cart-subtotal {
    color: #CFE91A;
    margin-left: 11px;
}

#user-information #shopping-cart #shopping-cart-preview {
    background-color: White;
    display: none;
    left: 0;
    outline: 1px solid cyan;
    overflow: hidden;
    position: absolute;
    top: 44px;
    width: 320px;
}

#user-information #shopping-cart #shopping-cart-preview p {
    margin: 0;
    color: Black;
}

#user-information #action-buttons {
    float: right;
    margin-right: 12px;
    margin-top: 3px;
}

Пример JSFiddle работает именно так, как я хочу, за исключением того, что когда я перемещаю мышь из сводки корзины на всплывающую панель предварительного просмотра корзины, вызывается событие fadeOut (), а затем происходит событие fadeIn () уволена. Таким образом, мы получаем эту затухающую дилемму исчезновения.

Я бы хотел, чтобы панель не исчезала при перемещении мыши вниз для ввода сводки.

Что вы предлагаете?

Другая проблема заключается в том, что когда я быстро перемещаю мышь, кажется, анимация ставится в очередь и выполняется. Это означает, что элемент может исчезать / исчезать много раз, даже после того, как я закончу движение мышью Предложения?

EDIT

Так что я пытаюсь что-то вроде этого; Msgstr "Скрыть предпросмотр, если они кликнули за его пределами." 

$('#wrapper').click(function () {
    if ($(this) != $('#shopping-cart')) {
        $('#shopping-cart-preview').fadeOut();    
    }
});

Однако даже когда я щелкаю внутри предварительного просмотра, вызывается fadeOut (). Я уверен, что что-то не так с моим условным заявлением. Есть предложения?

РЕДАКТИРОВАТЬ 2:

Поймите это с некоторыми идеями от вас, ребята. :)

Вот как вы это делаете: 

$('#shopping-cart').mouseenter(function () {
    $('#shopping-cart-preview').stop(true, true).fadeIn();
});

$('#shopping-cart').mouseleave(function () {
    $('#shopping-cart-preview').delay(2000).fadeOut();
});

$('#shopping-cart-preview').mouseenter(function () {
    $(this).stop(true, true).show();
});

Ответы [ 4 ]

2 голосов
/ 09 января 2012

У меня была такая же проблема с навигацией для thecl.com

Мое решение состояло в том, чтобы использовать http://cherne.net/brian/resources/jquery.hoverIntent.html, это дает задержку, позволяющую пользователю навести курсор мыши на элементе div, который держит его открытым.

1 голос
/ 09 января 2012

Я придумал это решение, не уверен, что этого достаточно, но, пожалуйста, попробуйте; 

$('#shopping-cart')
    .mouseenter(function() {
        $('#shopping-cart-preview').fadeIn();
    })
    .mouseleave(function() {
        $('#shopping-cart-preview').delay(500).fadeOut();
    });

$('#shopping-cart-preview').mouseenter(function() {
        $(this).stop(true).show();
    })
    .mouseleave(function() {
        $(this).delay(500).fadeOut();
    });
0 голосов
/ 09 января 2012

Демонстрационная скрипка

Изменение в коде Jquery: 

$('#shopping-cart').mouseenter(function() {
    $('#shopping-cart-preview').stop().fadeIn();
});
$('#shopping-cart').mouseleave(function() {
    $('#shopping-cart-preview').fadeOut();
});

Кроме того, я бы рекомендовал, чтобы div предварительного просмотра корзины покупок отображался прямо под сводным блоком корзины. Это устранит проблему потери div предварительного просмотра, если пользователь медленно перемещает свою мышь от общего div к предварительному div. Я не думаю, что кто-то будет таким медленным.

EDIT:

Новая демонстрационная скрипка

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

Новый код: 

$('#shopping-cart').mouseenter(function() {
    $('#shopping-cart-preview').stop().fadeIn();
});
$('#shopping-cart').mouseleave(function() {
    setTimeout(function(){$('#shopping-cart-preview').fadeOut();},1000);
});
0 голосов
/ 09 января 2012

Попробуйте - я переместил div предварительного просмотра корзины покупок за пределы div корзины покупок и упростил код jquery -> jsfiddle

...