Jquery toggle('slide') only slides once

Question

I am very new to jquery so please forgive me in advance if my question is too basic. I am having some problems with a hover slide effect that seems to be a mixture of CSS and jquery issue. When i hover over the image it slides over to the end of the image perfectly well the first time, but then it seems that the hover effect only slides half way from under the first element the second time, instead of starting from the image sliding over the the end.

I have tried many other possibilities for this but so far have had no luck, i would be very grateful if someone can point me in the right direction :)

An example of what i am trying to achieve can be found here

http://jsfiddle.net/robolist/rK4GD/

$('.proimg').hover(function(event) {
      $('.boxcaption',this).stop().toggle( 'slide' );
}).on('mouseleave',function(event) {
      $('.boxcaption',this).stop().toggle( 'slide' )});

Many thanks in advance

Answer 1

When you use toggle on hover, you don't need to do the the mouseleave event. Also note that stop takes to boolean parameters, first for clear queue, second for jump to end:

Just do:

$('.proimg').hover(function(event) {
    $('.boxcaption',this).stop(true, true).toggle( 'slide' );
});

Fiddle: http://jsfiddle.net/rK4GD/10/

See: http://api.jquery.com/stop/