Question

我有这样的链接：

<div id="section-1">
  <a class="a" href="#">somethig text</a>
  <a class="a" href="#">somethig text</a>
  <a class="a" href="#">somethig text</a>
  <a class="a" href="#">somethig text</a>
  <a class="a" href="#">somethig text</a>
</div>

这是JQuery：

$('.a').mouseover(function(){
 $(".a").animate({height:"100px"},150);
  $(".a").mouseout(function(){
   $(".a").animate({height:"30px"},150);
 });
});

我想在鼠标悬停时为a类制作动画，但它会为所有名称为a的类设置动画效果，我想要将其完全动画化为鼠标悬停

Answer 1

使用：

$('.a').mouseover(function () {
    $(this).animate({ height: "100px" }, 150);
});
$(".a").mouseout(function () {
    $(this).animate({ height: "30px" }, 150);
});

Answer 2

您必须使用this才能获取正在悬停的当前元素。

尝试，

$('.a').mouseover(function(){
   $(this).animate({height:"100px"},150);
});

$(".a").mouseout(function(){
   $(this).animate({height:"30px"},150);
});

或者首选方法是使用.hover()，

$('.a').hover(function(){
   $(this).animate({height:"100"},150);
},function(){
   $(this).animate({height:"30"},150);
});

DEMO

Answer 3

$( ".a" ).mouseover(function() {
         $(this).stop().animate({height:"100px"},150);
     }, function() {
         $(this).stop().animate({height:"30px"},150);
     });

Answer 4

在stop()之前使用animate()因为它会停止当前正在运行的$( ".a" ).hover(function() { $(this).stop().animate({height:"100px"},150); }, function() { $(this).stop().animate({height:"30px"},150); }); 匹配元素上的动画。

{{1}}

Answer 5

使用$('.a') you select every object with class a

$('.a').mouseover(function(){
 //here this will refer to current a tag
 $(this).animate({height:"100px"},150);
});

  $(".a").mouseout(function(){
 //here this will refer to current a tag
   $(this).animate({height:"30px"},150);
 });

如何选择这个Jquery

5 个答案:

DEMO