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

use setTimeout

simple demo

$(document).ready(function () {
    var hoverIntent;

    $('.viewport').mouseenter(function (e) {
        clearInterval(hoverIntent);
        $this = $(this); // save reference of $(this)
        hoverIntent = setTimeout(function () {
            $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);
        }, 500);
    }).mouseleave(function (e) {
        clearInterval(hoverIntent);
        $(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);
    });
});

Here is the answer:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $(".viewport ").hoverIntent(makeTall,makeShort);

    }); // close document.ready

    function makeTall(){  $(this).find('img').animate({ height: '300', left: '-40', top: '-40', width: '300',}, 300); $(this).find('span').fadeIn(280);}
    function makeShort(){ $(this).find('img').animate({ height: '225',left: '0', top: '-0'  , width: '225' ,}, 300);$(this).find('span').fadeOut(280);}
</script>