像Google圖像一樣將圖像懸停縮放DELAY

Question

我從一個視頻教程中編寫了關於js的代碼，但是動畫制作之前沒有任何延遲。 我已經嘗試了很多使用delay（）和setTimeout（）的方法，但是沒有得到所需的結果...

如果有人可以幫助我？ 請這樣做：）

為此我將不勝感激。

這是可以編輯和在線運行的代碼： http : //jsfiddle.net/S2svG/

這是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
                }
            }]
        });                    
});     

Answer 1

這是您需要的嗎？

http://jsfiddle.net/S2svG/48/

干杯

Answer 2

如果您希望在mouseover事件和動畫之間延遲，則可以查看一下hoverIntent jQuery插件 ：

hoverIntent是一個插件，它試圖確定用戶的意圖……就像一個水晶球一樣，只需要鼠標移動即可！ 它的工作方式與jQuery的內置懸停類似（並從中派生）。 但是，它不會立即調用onMouseOver函數，而是會等到用戶的鼠標速度足夠慢后再進行調用。

話雖如此，您可能想看看jQuery.delay() 。 演示在這里 。