jQuery悬停克隆项目

Question

我有一些像这样的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;
   }
}            

Answer 1

这是因为你将克隆的项目插入了.hoverWrapper.移动鼠标的瞬间,脚本会检测到您不再悬停在鼠标上,因此它会删除克隆.然后它会检测到你再次悬停,然后再次插入,然后再次检测,依此类推.

您所要做的就是在包装器中插入克隆.

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

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