Question

我有一些jQuery代码。我怎样才能让它更简单？

$(document).ready(function(){

$('.button1').hover(function() {
    $(".box-1").stop().animate({bottom:'0'});
     $('.dul-1').stop().animate({top:'0px'});
},
function () {
$(".box-1").stop().animate({bottom:'-100px'});
    $('.dul-1').stop().animate({top:'-100px'});
}
);


 $('.button2').hover(function() {
    $(".box-2").stop().animate({bottom:'0'});
     $('.dul-2').stop().animate({top:'0px'});
},
function () {
$(".box-2").stop().animate({bottom:'-100px'});
    $('.dul-2').stop().animate({top:'-100px'});
}
);  });

fiddle link

Answer 1

检查更新fiddle 已将data-index属性添加到按钮类div。并获取button.with索引的hove事件的索引，您可以动态创建.box-1和.dul-1或2的类名

$(document).ready(function(){
   var index  = ''
   $('.button').hover(function() {
      index = $(this).data('index');
      $(".box-"+index).stop().animate({bottom:'0'});
      $('.dul-'+index).stop().animate({top:'0px'});
   },
   function ()  {
      $(".box-"+index).stop().animate({bottom:'-100px'});
      $('.dul-'+index).stop().animate({top:'-100px'});
    }
   );
});

如何简化动画jQuery代码

1 个答案: