Question

如何在mouseenter上为div中的2个不同元素设置动画，并在鼠标离开时恢复。

图标将是div的中心，当鼠标悬停时，图标将在左侧移动，文本将从左侧出现，当鼠标移出，图标和文本向右移动时，图标将在其默认位置，文本将消失

尝试通过数据类型捕获div并为其设置动画。任何参考以获得最佳方法？

$menuItem.bind('mouseenter', function(e) {
  var $item = $(this),
    $wrapper = $item.children('a'),
    $movingItem = $item.find('.sti-item');

  $movingItem.each(function(i) {
    var $item = $(this),
      $item_sti_type = $item.data('type');

    if ($item_sti_type === 'icon') {
      $(this).animate({
        left: '-=20%'
      }, 100, $activ.easing, function() {
        console.log('done');
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pntbx">
  <a href="#">
    <span data-type="icon" class="cctv sti-icon sti-item"></span>
    <h2 data-type="mText" class="sti-item text">Point of Sales</h2>
  </a>
</div>

Jquery为不同的元素

0 个答案: