Javascript 图像悬停缩放延迟，如谷歌图像

我在一个视频教程中写了一些关于js的代码，但在制作动画之前没有延迟。 我用delay（）和setTimeout（）尝试了很多方法，但没有得到需要的结果

如果有人能帮我？请这样做：）

我会非常感激的

以下是可以在线编辑和运行的代码：

下面是js代码：

$(function(){

    $.fn.popOut=function(user_opts){            
        return this.each(function(){

            var opts=$.extend({
                useId:"poppedOut",
                padding:20,
                border:0,
                speed:200
            },user_opts);

            $(this).mouseover(function(){
                // kill any instance of this already
                $("#"+opts.useId).remove();

                // make a copy of the hovered guy
                var $div=$(this).clone();

                // setup for prelim stuff
                $div.css({
                    "position":"absolute",
                    "border":opts.border,
                    "top":$(this).offset().top,
                    "left":$(this).offset().left,
                    "-moz-box-shadow":"0px 0px 12px black",
                    "-webkit-box-shadow":"0px 0px 12px black",
                    "z-index":"99"
                });

                // store all of the old props so it can be animate back
                $div.attr("id",opts.useId)
                    .attr("oldWidth",$(this).width())
                    .attr("oldHeight",$(this).height())
                    .attr("oldTop",$(this).offset().top)
                    .attr("oldLeft",$(this).offset().left)
                    .attr("oldPadding",$(this).css("padding"));

                // put this guy on the page
                $("body").prepend($div);

                // animate the div outward
                $div.animate({
                    "top":$(this).offset().top-Math.abs($(this).height()-opts.height),
                    "left":$(this).offset().left-opts.padding,
                    "height":opts.height,
                    "padding":opts.padding
                },opts.speed);

                // loop through each selector and animate it to its css object
                for(var eachSelector in opts.selectors){
                    var selectorObject=opts.selectors[eachSelector];
                    for(var jquerySelector in selectorObject){
                        var cssObject=selectorObject[jquerySelector];
                        $div.find(jquerySelector).animate(cssObject,opts.speed);
                    }
                }

                $div.mouseleave(function(){
                    $("#"+opts.useId).animate({
                        width:$(this).attr("oldWidth"),
                        height:$(this).attr("oldHeight"),
                        top:$(this).attr("oldTop"),
                        left:$(this).attr("oldLeft"),
                        padding:$(this).attr("oldPadding")
                    },0,function(){
                        $(this).remove();
                    });
                });
            });
        });
    };
        $(".productBox").popOut({
            height:300,
            border:"1px solid #333",
            selectors:[{
                ".productDescription":{
                    height:150
                }
            }]
        });                    
});     

这就是你需要的：

---

干杯

如果您希望鼠标悬停事件和动画之间有延迟，您可能需要查看：

hoverIntent是一个插件，它尝试确定用户的 意图就像一个水晶球，只能用鼠标移动！它就像 （并且源自）jQuery的内置悬停。但是, 它立即调用onMouseOver函数，直到 在进行呼叫之前，用户的鼠标速度足够慢

---

话虽如此，你还是想看看

使用delay（）会得到什么结果？当鼠标移动时，它是在做延迟而不是取消还是什么的？他说，“但动画之前没有延迟”：-，是的，看起来像我所说的，除了一个小细节：当鼠标在缩放之前退出时，图像无论如何都会缩放。这段视频：我刚刚编辑了我的答案，new fiddle，添加了一行代码，中断了动画->$div.stop（）.animate（）；如果你在基辅（乌克兰）参加2012年欧洲杯，我会请你吃饺子和罗宋汤，如果你想要我们的伏特加，我也会请你喝。）同样的问题如上所述：看起来像我所说的，除了一个小细节：当鼠标在缩放前移出时，图像无论如何都会缩放。这段视频：我不推荐一个额外的插件，它很小，但仍然是1,4K，用于简单的东西want@Sylvio你说得对。我在几分钟前添加了另一种方法。但如何解决鼠标在1秒前移出时的缩放问题@维塔利：我认为这就像在必要的地方添加一个

.stop（）

一样简单。一分钟内检查更新的小提琴（第54版）。