Question

I’m beginner level jquery and I setup this script but i need to modify it. I want to have it so that on hover, the arrow moves to the right 3px and then back to the left origional position..all before the mouse moves out.

Right now it is set to return to its original position but…only after mouse out. I want to include that step in the hover as a callback. so it moves to right then left consecutively. The red box effect remains the same for hover and out.

This is the script I have so far but having an issue changing it. any help would be wonderful so that I can learn.

<script type="text/javascript">

$(document).ready(function() {
    var $red   = $('#red');
    var $arrow = $('#arrow');
    $('#wording').hover(
      function() {
        $red.animate({'width': 'toggle'});
        $arrow.css('color', 'white').delay(100).animate({'right': '-=3px'}, 'fast');
      }, function() {
        $red.animate({'width': 'toggle'});
        $arrow.css('color', 'red').delay(100).animate({'right': '+=3px'}, 'fast');
     });
});

</script>

Answer 1

$('#wording').on('mouseenter', function() {
  $red.animate({'width': 'toggle'});
  $arrow.css('color', 'white').delay(100).animate({'right': '-=3px'}, 'fast', function(){
    $red.animate({'width': 'toggle'});
    $arrow.css('color', 'red').delay(100).animate({'right': '+=3px'}, 'fast');
  });
});

The callback is passed as a third argument to animate