Question

我有两个功能来制作一些动画效果，如何简写这个功能并将其改为简单的代码？

   $('.box-1').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'});
   });

$('.box-2').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 .add数据索引属性检查为.box div。所以当悬停事件调用脚本将使用$（this）.attr（＆＃39; data-index＆＃39;）;来获取索引。

HTML：

<div class="wrapper">
  <div class="dul-1"></div>
  <div class="dul-2"></div>
  <div class="box box-1" data-index="1"></div>
  <div class="box box-2" data-index="2"></div>
</div>

Javascript：

$('.box').hover(function() {
    index = $(this).attr('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 个答案: