jQuery each width problem

Question

I have the following function set to run on a hover over an image:

function() {
  $('.slides .slide h3').each(function(i){
    var owidth = $(this).width()
    $(this).animate({"right":730 - owidth - 16}, 500);
  });
}

You can view the page here. Over the image and click the next icon on the lower right of the image. For some reason, the function is calculating the first h3's width correctly, but then it thinks all other h3s have a width of 0. Can anyone offer a solution?

Answer 1

function() {
  var owidth  = 0;
  $('.slides .slide h3').each(function(i){
    owidth = $(this).width();
    $(this).animate({"right":(730 - owidth - 16) + 'px'}, 500);
  });
}

A better way:

function() {
  $('.slides .slide h3').each(function(i){
    $(this).stop().animate({
      "right": (714 - $(this).width()) + 'px'
    }, 500);
  });
}