2

次のような HTML 構造を取得しました。

<div id="mobileWrapper" class="ios">
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            <div class="previewLeft">
                 <span class="previewLeftInner"> 10% </span>
            </div>
            <div class="previewRight">
                 <span class="previewUser"> Some Text here </span>
            </div>
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            ...
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            ...
        </div>
        <!-- clone will placed here -->
    </div>
</div>

アイテムをホバーしているときに、ホバーしたアイテムのクローンを作成し、ホバーした.hoverWrapperアイテムの上に大きく配置したいと考えています。さて、これまでのところこれは機能しています。ここでの問題は、ホバリング中のちらつき効果です。いくつかの助けは優雅です！

http://jsbin.com/oJeDUmU/2/edit

私はこれを試しましたが、私が望むものではありません:

if ($(this).parent().find('.hoverWrapper')) {
    if ($(this).find('.previewActive')) {
        return false;
   }
}
4

2 に答える 2

8

の外側に複製されたアイテムを挿入しているためです.hoverWrapper。マウスを動かした瞬間に、スクリプトはマウスがカーソルを合わせていないことを検出し、クローンを削除します。次に、再びホバリングしていることを検出するので、再度挿入し、再度検出します。

クローンをラッパー内に挿入するだけです。

hoveredItem.before(cloneItem);
//change to this line
hoveredItem.append(cloneItem);

http://jsbin.com/oJeDUmU/4/edit

于 2013-11-05T14:17:18.163 に答える
2

ちらつきは、複製されたアイテムを表示するとすぐに、元のアイテムの外にホバーすることが原因です。その後、クローンが消え、再びホバリングします。

これを修正するには、コードを変更してmouseenter元の要素mouseleaveを複製します。

$(document).ready(function () {

    $("div.hoverWrapper").on('mouseenter', function () {
        console.log('enter');
        var hoveredItem = $(this);
        var position = hoveredItem.offset().top - $('#mobileWrapper').offset().top - hoveredItem.height() / 2;

        var cloneItem = $(this)
            .clone()
            .addClass('previewActive')
            .css('top', position)
            .css('left', '-34px')
            .on('mouseleave', function () {
                console.log('leave');
                $(this).fadeOut(300, function () {
                    $(this).remove();
                });
                $(this).remove();
            });
        $('#mobileWrapper').find('.previewActive').remove(); // remove other boxes
        hoveredItem.before(cloneItem);
    });

});

http://jsbin.com/oJeDUmU/16/edit

于 2013-11-05T14:22:27.027 に答える