CODEWITHSUNDEEP
jquery
Elyor
Elyor

Reputation: 5532

how to repeat jquery fadein and fadeout but avoid disappearing

I'm trying fadein and fadeout repeatedly

<img src="logo" />

I have this jquery to repeat the fades, but how to avoid disappearing completely, like fadeout on the halfway.

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

    fadeInOut();
});

JSFIDDLE

Upvotes: 0

Views: 155

Answers (1)

alexc
alexc

Reputation: 1310

Something like this?

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

$(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);
  
});
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;
}
<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" />

Upvotes: 2

Related Questions