遍历CSS元素的宽度

Question

Is it possible to use jQuery's .css('width', '0%') and loop through it to extend it to 100% using a JavaScript loop?

// Flashing function
fadeloop('.name-part.p', 1500, 500, true)
fadeloop('.name-part.y', 900, 300, true)
fadeloop('.name-part.x', 1000, 3200, true)
fadeloop('.name-part.i', 800, 2200, true)
fadeloop('.name-part.s', 200, 1400, true)

function fadeloop(el,timeout,timein,loop){
    var $el = $(el),intId,fn = function(){
         $el.fadeOut(timeout).fadeIn(timein);
    };
    fn();
    if(loop){
        intId = setInterval(fn,timeout+timein+100);
        return intId;
    }
    return false;
}

// Loop from 0% width to 100% width

$('document').ready(function(){
  $('.name-home').css('width', '0%');
})

.name-home {
  width: 100%;
  max-width: 754px;
  height: 300px;
  position: absolute;
  margin: 0 auto;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Can provide a link if interested.

Answer 1

I'm not entirely sure if this is the effect you're looking for, but I believe CSS animations are really the way to go. Here's a fairly smooth 'flexing'/'breathing' effect:

 #wrapper { text-align: center } .name-home { display: inline-block; animation-name: anim; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 3s; } @keyframes anim { from { width:0% } to { width:20% } } 

 <div id="wrapper" ><span class="name-home p">p</span ><span class="name-home y">y</span ><span class="name-home x">x</span ><span class="name-home i">i</span ><span class="name-home s">s</span ></div> 

Or perhaps this is closer to what you're trying to achieve.

 #wrapper { display: flex; flex-flow: column; align-items: center; } .name-home { animation-iteration-count: infinite; background: #000; color: #fff; text-align: center; } .name-home.p { animation-duration: 2s; animation-name: anim-py; } @keyframes anim-py { from { width:0% } 75% { width:100% } to { width:0% } } .name-home.y { animation-duration: 1.2s; animation-name: anim-py; } .name-home.x { animation-duration: 4.2s; animation-name: anim-xs; } @keyframes anim-xs { from { width:0% } 75% { width:100% } to { width:0% } } .name-home.i { animation-duration: 2.4s; animation-name: anim-i; } @keyframes anim-i { from { width:0% } 75% { width:100% } to { width:0% } } .name-home.s { animation-duration: 1.2s; animation-name: anim-xs; } 

 <div id="wrapper" ><div class="name-home p">p</div ><div class="name-home y">y</div ><div class="name-home x">x</div ><div class="name-home i">i</div ><div class="name-home s">s</div ></div>