結合jQuery的調用到1個功能

我有以下的jquery該動畫懸停：結合jQuery的調用到1個功能

 $('#footerNetwork').hover(function(){ 
      $('#popupNetwork').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupNetwork').animate({top:'30px'},{queue:true,duration:500}); 
     }); 

     $('#footerPort').hover(function(){ 
      $('#popupPort').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupPort').animate({top:'30px'},{queue:true,duration:500}); 
     }); 

     $('#footerAirport').hover(function(){ 
      $('#popupAirport').animate({top:'-62px'},{queue:true,duration:500}); 
     }, function(){ 
      $('#popupAirport').animate({top:'30px'},{queue:true,duration:500}); 
     });

等等

我怎麼能結合這些插入功能，識別哪些鏈接已經徘徊（即：footerNetwork）並將相應的div設置爲動畫（popupNetwork）？謝謝！

來源

2010-08-16 galilee

我假設你有一個類foo關於你想添加懸停行爲的項目。然後，它只是一個跟隨（表觀）footer...模式的事情：

$(document).ready(function(){ 
    $('.foo').hover( 
    function(){ 
     $('#popup' + this.id.substr(6,this.id.length-6)).animate({...}); 
     //       ^remove "footer" portion of id 
    }, 
    function(){ 
     $('#popup' + this.id.substr(6,this.id.length-6)).animate({...}); 
    } 
); 
});

根據您的文件是如何構成的，你還可以通過它們的容器標識「頁腳...」的元素，而不是類。

來源

2010-08-16 00:48:37

謝謝ken，這個作品很完美 – galilee 2010-08-16 22:54:03

由於偏移量是不固定的，它不是真的有可能有一個調用來獲取相同的結果，但是，這樣的功能就可以了：

function hoverIt(name, topIn, topOut, duration) 
    duration = (duration != undefined) ? duration : 500; 

    $('#footer' + name).hover(function(){ 
     $('#popup' + name).animate({top: topIn + 'px'}, 
          {queue: true, duration: duration}); 
    }, function(){ 
     $('#popup' + name).animate({top: topOut + 'px'}, 
          {queue: true, duration: duration}); 
    }); 
}

然後，只需調用該函數的每個動畫：

hoverIt('Network', -80, 30, 300); 
hoverIt('Port', -62, 30); 
hoverIt('Airport', -62, 30);

我覺得好多了。當就會有很多人，你可以使用類似：

var hovers = [['Network', -80, 30, 300], 
       ['Port', -62, 30], 
       ['Airport', -62, 30]]; 

for (var i = 0; i < hovers.length; i++) { 
    hoverIt(hovers[i][0], hovers[i][1], hovers[i][2], hovers[i][3]); 
}

注：未測試

來源

2010-08-16 00:51:50

對不起，在例子中的錯字，他們都是完全一樣的偏移..... – galilee 2010-08-16 22:45:18

哈哈！然後，沒關係，只是忽略我的帖子。 – 2010-08-16 23:22:24

你可以做這樣的事情：

var tops = { footerNetwork:'-80px', footerPort:'-62px', footerAirport:'-62px' }; 
$('#footerNetwork, #footerPort, #footerAirport').hover(function(){ 
    $('#'+this.id.replace('footer','popup')).animate({top: tops[this.id]}, 500); 
}, function(){ 
    $('#'+this.id.replace('footer','popup')).animate({top:'30px'}, 500); 
});

如果添加對這些元素的類別說class="footer"，那麼你可以將.hover()更改爲$('.footer').hover(function(){，使它更清潔。爲了得到合適的#popup_____元素，我們只需要當前的ID，例如footerNetwork並執行.replace()以獲取彈出ID。 tops的目標是存儲各種最高值，因爲它們不同。

來源

2010-08-16 01:39:19

結合jQuery的調用到1個功能

回答

相關問題