Jquery: How do I get a Hoverintent like effect working with mousenter / mouseleave? Below:
<pre><code>$(document).ready(function () {
    $('.viewport').mouseenter(function (e) {
        $(this).css({
            'z-index': '10'
        }); /*Add a higher z-index value so this image stays on top*/
        $(this).children('a').children('img').animate({
            height: '300',
            left: '-40',
            top: '-40',
            width: '300',
        }, 300);
        $(this).children('a').children('span').fadeIn(280);;
    }).mouseleave(function (e) {
        $(this).css({
            'z-index': '0'
        }); /* Set z-index back to 0 */
        $(this).children('a').children('img').animate({
            height: '225',
            left: '0',
            top: '-0',
            width: '225',
        }, 250);
        $(this).children('a').children('span').fadeOut(280);
    });
});
</code></pre>
