Home  >  Q&A  >  body text

javascript - Jquery focus map fade in and fade out effect, please give me some advice

The timer runs back every 3 seconds:

    var i = 0,
    t = setInterval(function () {
        i++;
        i===3 ? i=0 : false;
        $('.slide li').eq(i).fadeIn(300).siblings('li').fadeOut(300);
    }, 3000);

But the effect will be flashy white, and the transition is not natural at all. I need a very natural transition effect.

Example of such effect: http://www.5icool.org/demo/20...

Am I using the wrong method?

大家讲道理大家讲道理2693 days ago759

reply all(2)I'll reply

  • 我想大声告诉你

    我想大声告诉你2017-06-28 09:27:51

    The effect is described in the link below

    .slide{
        position:relative;
    }
    li{
        position:absolute;
    }

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-06-28 09:27:51

    Fade in and out is to change the transparency, you can try to use css3 transition
    var i = 0,

    t = setInterval(function () {
        i++;
        i===3 ? i=0 : false;
        $('.slide li').eq(i).addClass("opacity").siblings('li').removeClass("opacity");
    }, 3000);
    
    <style>
     .slide li{transition: all .3s; opacity:0;}
    <style>

    reply
    0
  • Cancelreply