CODEWITHSUNDEEP
javascriptjquery
Riantori
Riantori

Reputation: 317

how to simplify animation jQuery code

I have some jQuery code. How can I make it more simple?

$(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

Upvotes: 0

Views: 31

Answers (1)

Nishit Maheta
Nishit Maheta

Reputation: 6031

check updated fiddle have added data-index attribute to button class div. and get index on hove event of button.with index you can dynamically create class name of .box-1 and .dul-1 or 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'});
    }
   );
});

Upvotes: 1

Related Questions