將鼠標懸停在alink上，然後設置動畫效果

Question

嗨我已經停下來試圖獲得我需要的工作。

基於：

$(".test a").hover(function(){ 
     $(this).toggle({ height: "200px" }); 
    }, function() { 
     var currentTab = $(this).attr('href'); 
     $(this).stop(true, false).animate({ height: "100px" }); 
    }); 
}); 

<div class="test"> 
    <a href="#one">1</a> 
    <a href="#two">2</a> 
    <a href="#three">3</a> 
</div> 

我需要它來動畫一個div不是自己一個，我想出了下面，其動畫下來，但不會備份等：

$(".test a").hover(function(){ 
     var activeTab = $(this).attr("href"); 

     $(activeTab).toggle({ height: "200px" }); }, function() { 
     $(activeTab).stop(true, false).animate({ height: "100px" }); }); }); 

<div class="test"> 
<a href="#one">1</a> 
<a href="#two">2</a> 
<a href="#three">3</a> 

<div id="one" class="tab one">1</div> 
<div id="two" class="tab two">2</div> 
<div id="three" class="tab three">3</div> </div> 

Answer 1

您需要重新聲明變量activeTab，因爲它只在的mouseenter的範圍存在，不是鼠標移出

$(".test a").hover(function(){  
      var activeTab = $(this).attr("href"); 
      $(activeTab).toggle({ height: "200px" }); 
    }, 
    function() { 
      var activeTab = $(this).attr("href"); 
      $(activeTab).stop(true, false).animate({ height: "100px" }); 
    }); 
}); 

Answer 2

$(".test a").hover(function(){  var activeTab = $(this).attr("href"); 

     $(activeTab).toggle({ height: "200px" }); }, function() { 
     $(activeTab).stop(true, false).animate({ height: "100px" }); }); }); 

這裏有一些錯誤... ...一個，算你括號....

$(".test a").hover(function(){ 
    var activeTab = $(this).attr("href"); 
    $(activeTab).toggle({ height: "200px" }); 
}, 
function() { 
    $(activeTab).stop(true, false).animate({ height: "100px" }); 
}); 
}); // too many closing brackets 

二是var activeTab超出第二功能範圍。因此，你需要在第二個功能重新定義var activeTab：

這應該工作：

$(".test a").hover(function(){ 
    var activeTab = $(this).attr("href"); 
    $(activeTab).toggle({ height: "200px" }); 
}, 
function() { 
    var activeTab = $(this).attr("href"); 
    $(activeTab).stop(true, false).animate({ height: "100px" }); 
});