On Complete Animation not working :/

I have a code that resizes a container div on hover - and I tried to resize a jquery scrollbar insid开发者_如何学Ce that container on animation complete - however I broke the whole code and I'm not sure how.

Here's the original:

$(document).ready(function(){
$('.scroll-pane').hover(function() {
    $('.leftmofo').animate({
        width: '600px'
        }, 300);

$('.scroll-pane').jScrollPane({showArrows:false,dragMaxHeight:
100,wheelSpeed:20}); 

},function() {
    $('.leftmofo').animate({
        width: '256px'
        }, 300);
});



});

And here's what I did:

$(document).ready(function(){
$('.scroll-pane').animate({width: '600px'}, 300, function() {
    $('.scroll-pane').jScrollPane({showArrows:false,dragMaxHeight: 100,wheelSpeed:20});  

},function() {
    $('.leftmofo').animate({
        width: '256px'
        }, 300);
});



});

Not sure where I went wrong, any help is appreciated :))) Thanks :)

Here's a demo of the original: http://jsfiddle.net/pufamuf/RmvVc/

You are missing }); of the first animate call. Try this

$(document).ready(function(){
  $('.scroll-pane').hover(function() {
     $('.leftmofo').animate({width: '600px'}, 300, function() {
        $('.scroll-pane').jScrollPane({showArrows:false,dragMaxHeight: 100,wheelSpeed:20});  
     });
  },function() {
      $('.leftmofo').animate({
        width: '256px'
        }, 300);
  });
});

Try this

$(document).ready(function(){
    $('.scroll-pane').animate({width: '600px'}, 300, function() {
        $('.scroll-pane').jScrollPane({showArrows:false,dragMaxHeight: 100,wheelSpeed:20}); 
    });
    $('.leftmofo').animate({width: '256px'}, 300);
});