jquery - IE - Jquery hover() works only first time

Question

I have an inline div with hover() function attached to it.

It works fine in FF, Chrome.

The issue is on IE, first time it works the second time I go over the div nothing.

HTML:

<div id="mini-cart-li" class="">
    <a class="heading" href="http://mb.local.com/checkout/cart/" title="View contents of your shopping cart">My Cart
    </a>
    <div id="mini-cart-content" class="block block-cart block-content" style="display: none;">
        BLA BLA BLA BLA BLA ....
        </div>
        </div>

JS:

    jQuery(document).ready(function () {

    jQuery("#mini-cart-li").hover(
        function () {
          //  jQuery(this).addClass('hover');
            jQuery("#mini-cart-content").stop(true, true).animate({opacity: "show", display: "block"}, "slow");
        },
        function () {
         //   jQuery(this).removeClass('hover');
            jQuery("#mini-cart-content").stop(true, true).animate({opacity: "hide", display: "none"}, "slow");
        }
    )
});

Answer 1

Try to use number for opacity value instead of show and hide:

jQuery("#mini-cart-li").hover(
    function () {
      //  jQuery(this).addClass('hover');
        jQuery("#mini-cart-content").stop(true, true).animate({opacity: 1, display: "block"}, "slow");
    },
    function () {
     //   jQuery(this).removeClass('hover');
        jQuery("#mini-cart-content").stop(true, true).animate({opacity: 0, display: "none"}, "slow");
    }
)

Answer 2

try use this

    $('#mini-cart-content').stop(true, true).animate({ opacity: "show" }, "slow");

     $("#mini-cart-content").stop(true, true).animate({ opacity: "hide" }, "slow");