（jQuery＆JavaScript）动画返回原始状态

Question

So I have this code:

$(document).ready(function(){

    $('#nexButton').mouseenter(function(){
        $('#nexButton').stop().animate({opacity: '1'},'fast'); 
            $('#nexButton').mouseleave(function(){
                $('#nexButton').stop().animate({opacity: '0.7'},'fast'); 
            });
    });

     $('#bacButton').mouseenter(function(){
        $('#bacButton').stop().animate({opacity: '1'},'fast'); 
            $('#bacButton').mouseleave(function(){
                $('#bacButton').stop().animate({opacity: '0.7'},'fast'); 
            });
    });

});

in my javascript and with the nexButton it runs perfect but with the bacbutton it just go back to 0.7 opacity while I'm still on the button?! What did I do wrong?

Answer 1

You can try this:

$(document).ready(function(){
    $('#nexButton, #bacButton')
      .on('mouseenter', function(){
          $(this).animate({opacity: '1'}, 'fast'); 
      })
      .on('mouseleave', function(){
          $(this).animate({opacity: '0.7'},'fast'); 
      });
});

Here is the FIDDLE .