Question

我正在尝试重复fadein和fadeout

<img src="logo" />

我有这个jquery重复淡出，但是如何避免完全消失，就像中途的淡出一样。

$(function () {
    var $element = $('div');
    function fadeInOut () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

JSFIDDLE

Answer 1

这样的东西？

http://jsfiddle.net/xsATz/1615/

＆＃13;

$(function() {
  var $element = $('img');

  function fadeInOut() {
    if ($element.hasClass('in')) {
      $element.removeClass('in')
      $element.addClass('out');
    } else {
      $element.removeClass('out')
      $element.addClass('in')
    }
  }

  setInterval(fadeInOut, 1000);
  
});

＆＃13;

img {
  width: 100px;
  height: 100px;
  opacity: 0.5;
}

.in {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.out {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://fakespot.com/assets/chrome-logo-9800603e4831fcbc5cb96f0b4953b852.png" />

＆＃13;

如何重复jquery fadein和fadeout但避免消失

1 个答案: