将鼠标悬停在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" }); 
});