jquery - 第一次使用这个 "sliding animation on menu hover with jQuery"Fiddle 悬停时如何关闭动画？

Question

我在使用 jQuery 的菜单悬停上发现了这个很棒的滑动动画，但我想知道我如何才能做到这一点，以便在第一次悬停时它不会为 left 和 width 属性设置动画，而是立即跳转到悬停的元素。之后，它确实为背景的位置设置了动画。只有再次重新输入时，第一次才会停止动画。

// insert slider
$('ul').append('<div id="slider"></div>');

// initially reset
var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left, 'width' : width});

// sliding
$('ul li a').hover(function(){

    var left = $(this).parent().position().left;
    var width = $(this).width();

    $('#slider').stop().animate({
        'left' : left,
        'width' : width
    });
});

希望我解释得足够好...

提前致谢!

这是 fiddle :http://jsfiddle.net/5wPQa/2/

Answer 1

我假设您也不希望默认情况下突出显示第一个链接？然后可以删除//initially reset部分。

让我们将对 ul 元素的引用存储在 $ul 中，因为我们也需要在链接悬停处理程序中访问该元素，而我们不需要不想每次都使用 .parents() 或类似的东西在那里查找它。

让我们马上给 ul 添加一个类，no-animation。这将用于两件事，一开始隐藏 slider-div(通过样式表)，并确定我们是否要在链接悬停时设置动画。

让 slider 立即“跳”到一个位置，而不是动画，可以通过简单地调用 .css() 而不是 .animate() 来完成 -其余代码保持不变，因此我不再重复，而是将要执行的方法的名称存储在变量 method 中。

现在，当链接悬停时，我们首先检查父 ul 是否具有该类 no-animation。如果是这样，我们删除该类，并将方法设置为 css 而不是 animate。

$('#slider').stop()[method]() 然后调用 .css() 或 .animate()，取决于 method 包含的内容。

为了重置效果，我们只需再次添加该类，当 ul 本身不再悬停时。这再次隐藏了 slider-div(由于样式表中的规则)，并帮助我们确定这是下次再次“第一次悬停”。

// insert slider
var $ul = $('ul');
$ul.addClass('no-animation').append('<div id="slider"></div>');

$ul.on('mouseleave', function() {
  $(this).addClass('no-animation')
});

// sliding
$('ul li a').hover(function() {
  var left = $(this).parent().position().left;
  var width = $(this).width();
  var method = 'animate';

  if ($ul.hasClass('no-animation')) {
    $ul.removeClass('no-animation');
    method = 'css';
  } 
  $('#slider').stop()[method]({
    'left': left,
    'width': width
  });
});

ul {
  position: relative;
  margin: 50px;
}

ul.no-animation #slider {
  display: none;
}

ul li {
  display: inline-block;
}

ul li a {
  padding: 5px 15px;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
}

#slider {
  position: absolute;
  top: -5px;
  left: 0;
  height: 100%;
  width: 0;
  padding: 5px 15px;
  margin-left: 1px;
  background-color: #f00;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link number 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link something 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>