将鼠标悬停在alink上并为div设置动画

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范围内，而不存在于mouseout范围内

$(".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" });
});