Question

我是初级jquery并且我设置了这个脚本，但我需要修改它。我想拥有它，以便在悬停时，箭头移动到右侧3px，然后返回到左侧原始位置..所有鼠标移出之前。

现在它被设置为返回其原始位置但是......仅在鼠标移出后。我想在悬停中包含该步骤作为回调。所以它向右移动然后连续向左移动。悬停和外出时红框效果保持不变。

这是我到目前为止的脚本，但是有一个问题在改变它。任何帮助都会很棒，所以我可以学习。

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

回调作为第三个参数传递给animate

如何设置为另一个动画函数的回调动画

1 个答案: