jquery插件懸停效果不起作用

Question

謝謝大家看看我的問題。

我想寫我自己的jQuery圖片庫插件。它在頁面加載時工作正常，但當點擊PHOTO鏈接轉到PHOTO部分時它不起作用。

這裏是鏈接：

http://dharmeshpatel.net/core_reporting_api/flat-page.html

這裏是我做了什麼：

$(function() { 
    for (var i = 1; i <= 12; i++) { 
    var name = i + '.jpg'; 
    if(i<10) name = '0' + name; 
    var img = $('<img class="galleryImage" src="pic/'+ name + '"/>'); 
    $("#gallery").append(img); 
    }; 
    var g = new PS.Gallery('gallery'); 
}); 

這裏是插件代碼：（在頁面上刷新它的工作原理，但是當我點擊菜單上鍊接並轉到該div它懸停效果不起作用）。

(function(ns){ 
     ns.Gallery = function(id){ 
     var gallery = $('#'+ id); 
     var images = gallery.find('.galleryImage'); 

     var xPos = 50; 
     var yPos = 50; 
     var gWidth = gallery.width(); 

      images.each(function(idx,el){ 
       var img = $(el); 
       img.data('homeX',xPos); 
       img.data('homeY',yPos); 
       img.data('currentScale',1); 
       img.css({ 
        'left':xPos, 
        'top':yPos, 
        'width':img.width() * 0.25 
       }); 
       xPos += 95; 
       if(xPos > gWidth - 100){ 

        xPos = 50; 
        yPos += 115; 

       } 

       img.hover(
        function(event){ 
        var target = $(event.target); 
         animateImage(target,500,target.data('homeX'),target.data('homeY'),2); 
        },function(event){ 
         returnAllToNormal(); 
        } 
       ); 
       var returnAllToNormal = function(){ 
        images.each(function(idx,el){ 
         var img = $(el); 
         animateImage(img,500,img.data('homeX'),img.data('homeY'),1); 
        }); 
       } 
       var animateImage = function(img,duration,left,top,scale){ 
         img.stop(); 
         img.css('textIndent',img.data('currentScale')); 
         img.animate({ 
          'left':left, 
          'top':top, 
          'textIndent':scale 
         }, 
         { 
         duration:duration, 
         step:function(now,fx){ 
          if(fx.prop === 'textIndent'){ 
           img.data('currentScale',now); 
           img.css('transform','scale(' + now + ')'); 
          }else if(fx.prop === 'left'){ 
           img.css('left',now); 
          }else if(fx.prop==='top'){ 
           img.css('top',now); 
          } 
         } 
        }); 
       } 
      }); 
     } 
    }(window.PS = window.PS || {})); 

上午我在正確的位置調用插件？

Answer 1

當我改變你的div＃con的最高值爲-2500px你的畫廊種類破了。在探索進一步瞭解，你正在存儲當前的個人形象的X和Y位置，這是造成這個問題。

而不是存儲當前值，播放當前值。下面是有問題的代碼：

var img = $(el); 
img.data('homeX',xPos); 
img.data('homeY',yPos); 
img.data('currentScale',1); 
img.css({ 
    'left':xPos, 
    'top':yPos, 
    'width':img.width() * 0.25 
});