圖像懸停像谷歌圖像縮放

Question

我寫了一些jquery代碼（從一個視頻教程），使像谷歌圖片mousehover縮放效果。 我想在縮放（0.5-1秒）之前添加一些延遲，但我不知道該怎麼做！ 我試了很多方法delay()或setTimeout()，但沒有什麼幫助！
我不知道爲什麼... 下面是javascript代碼：

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

而例如HTML代碼：

<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;"> 
    <div class="productImage" style="width:200px;height:116px;overflow:hidden;"> 
     <a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a> 
    </div> 
    <div class="productContent" style="float:left;"> 
     <div class="productTitle" style="height:29px;">Product title</div> 
     <div class="productDescription" style="height:70px;">Here is description of the product.</div> 
     <div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div> 
    </div> 
</div> 
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;"> 
    <div class="productImage" style="width:200px;height:116px;overflow:hidden;"> 
     <a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a> 
    </div> 
    <div class="productContent" style="float:left;"> 
     <div class="productTitle" style="height:29px;">Product title</div> 
     <div class="productDescription" style="height:70px;">Here is description of the product.</div> 
     <div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div> 
    </div> 
</div> 

誰能幫助我做到這一點？此外，我認爲這是非常有用的腳本。

在此先感謝！

Answer 1

這可能是你在找什麼：hoverIntent jQuery Plug-in

Answer 2

最好的例子可以在Pop Images like Google Images

Also take a look at the demo

Answer 3

發現如果你想克隆的對象複製到原來的DIV那麼你只需按照以下步驟操作：

將id加到您原來的div &以下代碼上面各自的代碼：

var old_box = $div.attr('id'); 

$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")); 

添加以下代碼MouseLeave事件上面：

$div.click(
    function() { 
     $("#" + old_box).html($(this).html()); 
     $(this).remove(); 
    } 
);