jQuery hovering a cloned item

Question

I got some HTML structure like this:

<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>

Now when I'am hovering the .hoverWrapper Items, I want to clone the hovered Item and place it bigger over the hovered Item. Okay, so far this is working. Problem here is a flickering effect while hovering. Some help would be gracefull!

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

I tried this, but does not what I want:

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

Answer 1

It's because you're inserting the cloned item outside of the .hoverWrapper. The instant you move your mouse the script detects that you're no longer hovering over it so it removes the clone. Then it detects you're hovering again so it inserts it again, then detects it again, and so on.

All you have to do is insert the clone inside the wrapper.

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

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

Answer 2

The flickering is caused by the fact that, as soon as you display the cloned item, you hover out of the original item. Then the clone disappears, and you've hovered in again.

You can fix this by changing your code so that you mouseenter the original element but mouseleave the clone:

$(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