 <p>Found the solution. The problem was the <code>labelunderscore</code> div that was created in the page. This "confuses" the jquery library as whilst it applying the slide in effect, it has to apply the slide out effect <strong>on the same div</strong>.</p> <p>The problem has been sorted by creating the <code>labelunderscore</code> div in the function at runtime and assigning it a unique id based on the id of the hovered element. Code as follows:</p> <pre><code>// Slide in effect for hover on class=head labels $(".head").hover(function () { //alert($(this).attr('id')) $('#main').append('&lt;div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"&gt;&lt;/div&gt;'); // Set width to hovering element width: $('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20); // Set position on labelunderscore to current element left value $('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left); // Check where are we hovering. Left side slide from left right from right if ($(this).offset().left &gt; $(window).width()/2) { // We are on the right side $('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200); } else { // Left side $('#labelunderscore_' + $(this).attr("id") ).show('slide', {direction: 'left'}, 200); } }, function () { $('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200); }) </code></pre>