jQuery animate（）on document.ready

我試圖用這個例子實現照片縮放效果：http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/。但是，我需要使頁面加載後，而不是在懸停工作。所以我改變了懸停（）來準備（）：jQuery animate（）on document.ready

$(function() { 
     $('#container img').ready(
      function(){ 
       var $this = $(this); 
       $this.stop().animate({ 
        'opacity':'1.0', 
        'height':'200px', 
        'top':'0px', 
        'left':'0px' 
       }); 
      }, 
      function(){ 
      var $this = $(this); 
      $this.stop().animate({ 
       'opacity':'0.5', 
       'height':'500px', 
       'top':'-66.5px', 
       'left':'-150px' 
      }); 
      } 
     ); 
    });

然後，我不得不在Chrome調試器的JS錯誤：遺漏的類型錯誤：「在」運營商不能使用未定義搜索「顯示」莫非有人請給我一個提示來解決這個問題？

在此先感謝。

來源

2013-02-05 Sergey Stetsurin

這將有助於創造一個小提琴 – bpoiss

我不認爲'ready'事件可以安全地綁定到除'document'外的任何東西。嘗試綁定到'load'（而使用單個處理程序，只有'hover'支持兩個處理程序）。 –

你能做到這樣，如果你有不同的尺寸的圖像

$(document).ready(function(){ 
    img = $('#container img'); 
    imageWidth = img.outerWidth(); 
    imageHeight = img.outerHeight(); 
    centerX = (200 - imageWidth)/2; 
    centerY = (200 - imageHeight) /4; 
    img.css({'opacity': 0.5, 'top': centerY, 'left': centerX}) 
     .animate({'opacity': 1,'height': '200px', 'top': 0, 'left': 0}); 
});

你需要在CSS中設置一些值：

#container { 
     width: 200px; 
     height: 200px; 
     overflow: hidden; /*important*/ 
} 
#container img{ 
    position: relative; /*important*/ 
}

來源

2013-02-05 17:19:08 razzak

非常感謝。有效。再一次，謝謝。 –

jQuery animate（）on document.ready

回答

相關問題