Question

我刚刚知道jQuery onmouseenter / onmouseleave事件也会在动画过程中每次元素的 position / size 发生变化时触发，因此我通过在两个事件处理程序的开头使用if (img$.is(':animated')) return false;来进行简单的验证。

但是，这导致了另一个问题，有时mouseleave事件将永远不会执行，因为mouseleave早于mouseenter还没有完成就返回了false。

$(function() {

  $("img[data-alt-src]").on('mouseenter', function(e) {
      e.stopPropagation();
      e.preventDefault();
      var img$ = $(e.currentTarget);
      if (img$.is(':animated')) return false; // the validation
      img$.finish().animate({
        opacity: '-=1.0',
        deg: '+=90'
      }, {
        duration: 250,
        step: function(now) {
          img$.css({
            '-moz-transform': 'rotateY(' + now + 'deg)',
            '-webkit-transform': 'rotateY(' + now + 'deg)',
            '-o-transform': 'rotateY(' + now + 'deg)',
            '-ms-transform': 'rotateY(' + now + 'deg)',
            transform: 'rotateY(' + now + 'deg)'
          });
        },
        complete: function() {
          img$.data('tmp-src', img$.attr('src'));
          img$.attr('src', img$.data('alt-src'));
        }
      });
      img$.animate({
        opacity: '+=1.0',
        deg: '-=90'
      }, {
        duration: 250,
        step: function(now) {
          img$.css({
            '-moz-transform': 'rotateY(' + now + 'deg)',
            '-webkit-transform': 'rotateY(' + now + 'deg)',
            '-o-transform': 'rotateY(' + now + 'deg)',
            '-ms-transform': 'rotateY(' + now + 'deg)',
            transform: 'rotateY(' + now + 'deg)'
          });
        }
      });
    })
    .on('mouseleave', function(e) {
      e.stopPropagation();
      e.preventDefault();
      var img$ = $(e.currentTarget);
      if (img$.is(':animated')) return false; // the validation
      img$.finish().animate({
        opacity: '-=1.0',
        deg: '+=90'
      }, {
        duration: 250,
        step: function(now) {
          img$.css({
            '-moz-transform': 'rotateY(' + now + 'deg)',
            '-webkit-transform': 'rotateY(' + now + 'deg)',
            '-o-transform': 'rotateY(' + now + 'deg)',
            '-ms-transform': 'rotateY(' + now + 'deg)',
            transform: 'rotateY(' + now + 'deg)'
          });
        },
        complete: function() {
          img$.attr('src', img$.data('tmp-src'));
        }
      });
      img$.animate({
        opacity: '+=1.0',
        deg: '-=90'
      }, {
        duration: 250,
        step: function(now) {
          img$.css({
            '-moz-transform': 'rotateY(' + now + 'deg)',
            '-webkit-transform': 'rotateY(' + now + 'deg)',
            '-o-transform': 'rotateY(' + now + 'deg)',
            '-ms-transform': 'rotateY(' + now + 'deg)',
            transform: 'rotateY(' + now + 'deg)'
          });
        }
      });
    });

});

img {
  width: 150px;
  height: 150px;
  margin-right: 1.5em;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div style="position: relative; display: inline-block">
    <img
      src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
      data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
      alt="">
    <img
      src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
      data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
      alt="">
    <img
      src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
      data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
      alt="">
    <img
      src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
      data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
      alt="">
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
</body>
</html>

我被困住了如何摆脱这种状况？

Answer 1

我希望这可以解决...我添加了<my-dir> <cust-button /> </my-dir>函数，可以在动画的一半时间内翻转图像源...

<my-dir>

<my-dir />

setTimout

jQuery onmouseenter和onmouseleave触发位置/大小更改动画

1 个答案: