Question

我想通过图像源交换，淡入/淡出和的组合来制作翻转图像效果。通过使用 jQuery animate API 来旋转* 动画。但是有时它会产生怪异的结果，如果在图像区域中几次鼠标拖曳了鼠标光标（在完成动画之前），动画多次触发。< / p>

代码：

$(document).ready(function() {

  $("img[data-alt-src]")
    .mouseenter(function() {
    var img = $(this);
    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)'
        });
      }
    });
  })
    .mouseleave(function() {
    var img = $(this);
    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!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>
  
</body>
</html>

输出：

PS：如果我从控制台登录，则控制台还会在一个mouseenter事件中触发多个日志。

任何帮助将不胜感激。 TiA。

Answer 1

$(function() {

  $("img[data-alt-src]").on('mouseenter', function(e) {
      e.stopPropagation();
      e.preventDefault();
      var img$ = $(e.currentTarget);
      if (img$.hasClass('opened')) {
        return false;
      } else {
        img$.addClass('opened');
      }
      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);
      img$.removeClass('opened')
      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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!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>

</body>

</html>

查看此：）

Answer 2

您触发同一事件的次数过多，因此动画很不稳定。几个笔记

考虑使用MouseOver / Mouseout
考虑将addClass / removeClass用于CSS动画代码
在开始另一个（https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/）

jQuery动画API多次触发

2 个答案: