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;
}
}
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);