Question

I have a code that resizes a container div on hover – and I tried to resize a jquery scrollbar inside 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/

Answer 1

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);
  });
});