如何重複jQuery的淡入淡出和，但要避免消失

Question

我想淡入淡出和反覆

<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/

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