2

この例を使用して写真のズーム効果を実現しようとしています: http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/。ただし、hoverではなく、ページの読み込み後にこの効果を機能させる必要がありました。そこで、hover() を 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 エラーが発生しました: Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined 誰か、この問題を解決するヒントを教えてください。

前もって感謝します。

4

1 に答える 1

1

寸法の異なる画像がある場合は、このようにすることができます

$(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-05T17:19:08.130 に答える