How do I move it smoothly with jQuery or JS or css3 animation?

When I move from class="n2" to class="n1", I want to move smoothly and smoothly, but it doesn't work.
I'm doing this now.
I changed the class in js and shifted the position in css position, but where and how should I write it to move (change) smoothly?Thank you for your information.

https://jsfiddle.net/Lennxhjc/1/

$(function(){
  var$wrapper=$('.wrapper');
  varclassNameList = [
    'n5', 'n4', 'n3', 'n2', 'n1',
    /* 'n6', 'n7', 'n8', 'n9'*/
  ];
  setInterval(function(){
    var nodes = classNameList.map(function(className){
      US>return{
        className —className,
        $node: $wrapper.find('.'+className)
      };
    });
    var nodes3 = new Array (classNameList.length);
    for (vari=0;i<classNameList.length;i++){

      var name = classNameList[i];
      nodes3[i] = {
        $node: $wrapper.find('.'+name),
        className —name
      }
    }
    nodes.forEach(function(current,currentIndex,whole){
      var nextIndex=(currentIndex===whole.length-1) ?0:currentIndex+1;
      current.$node.removeClass(current.className);
      current.$node.addClass(whole[nextIndex].className);
    });
  }, 5000);
})();

#slide{
  width : 320px;
  margin:0 auto;
  text-align:center;
}

#slideul{
  position:relative;
  height —300px;
}

# slide li {
  position:absolute;
  overflow — hidden;
  width : 320px;
  margin:0 auto;
  text-align:center;
  background: #FFF;
}

# slide.n1 {
  /* Before animation, keep it the same size and position as n2*/
  bottom:0;
  z-index:10;
  opacity:1;
}

# slide.n2 {
  bottom: 18%;
  z-index:9;
  opacity:1;
}

# slide.n3 {
  bottom: 30%;
  z-index —8;
  opacity: 0.9;
}

# slide.n4 {
  bottom: 40%;
  z-index:7;
  opacity: 0.7;
}

# slide.n5 {
  bottom: 50%;
  z-index:6;
  opacity: 0.4;
}

# slide.n1 img {
  width: 100%;
}

# slide.n2 img {
  width: 83%;
}

# slide.n3 img {
  width: 73%;
}

# slide.n4 img {
  width: 63%;
}

# slide.n5 img {
  width:53%;
}


/* img Provisional Settings*/

img{
  background: #cc;
  width —50px;
  height —70px;
}


/* After stopping 3 seconds, take 2 seconds to run the scaleout keyframes (plus 5 seconds), equal to 5 seconds for js. */

.n1{
  - webkit-animation:scaleout 2.0sease-in-out 3.0s;
  animation:scaleout 2.0sease-in-out 3.0s;
}


/* Zoom n1 to 1.5x and erase*/

@-webkit-keyframes scaleout {
  0% {
    - webkit-transform:scale (1.0)
  }
  100% {
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}

@keyframesscaleout{
  0% {
    transform:scale(1.0);
    - webkit-transform:scale(1.0);
  }
  100% {
    transform —scale (1.5);
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<divid="slide">
  <ul class="wrapper">
    <lic class="n1">
      <img src="img/01.jpg" width="height="alt=">
    </li>

    <lic class="n2">
      <img src="img/02.jpg" width="height="alt=">
    </li>

    <lic class="n3">
      <img src="img/03.jpg" width="height="alt=">
    </li>

    <lic class="n4">
      <img src="img/04.jpg" width="height="alt=">
    </li>

    <lic class="n5">
      <img src="img/05.jpg" width="height="alt=">
    </li>
  </ul>
</div>

javascript jquery

2022-09-30 20:50

3 Answers

If it is css animation, changing transform will make it smooth.
If you move the z-axis, the overlapping order will be simulated properly.
I recommend the looping mechanism because it is simpler and safer to write than js.

body{
   overflow — hidden;
}
.wrapper{
   position:relative;
   width —200px;
   margin —1em auto;
   list-style: none;
   transform-style:preserve-3d;
   perspective —500px;
}
.wrapper li{
   background-color:rgba(100,200,100,1);
   color:#fff;
   width: 100%;
   position:absolute;
   left:0;
   top:0;
   text-align:center;
   line-height:2;
   transform-origin:center top 0px;
   animation —maenideru 30s infinite both;
}
.wrapper li:nth-of-type(1){
   animation-delay:-24s;
}
.wrapper li:nth-of-type(2){
   animation-delay:-18s;
}
.wrapper li:nth-of-type(3){
   animation-delay:-12s;
}
.wrapper li:nth-of-type(4){
   animation-delay:-6s;
}
.wrapper li:nth-of-type(5){
   animation-delay:0s;
}
@keyframes maenideru {
   0%,10% {
     transform —translateZ(-250px);
     opacity: 0;
   }
   15%,30% {
     transform —translateZ(-200px)translateY(1em);
   }
   35%,50% {
     transform —translateZ(-150px)translateY(2em);
   }
   55%,70% {
     transform —translateZ(-100px)translateY(3em);
   }
   75%,90% {
     transform —translateZ(-50px)translateY(4em);
   }
   95% {
     transform —translateZ(0px)translateY(5em);
     opacity:1;
   }
   100% {
     transform —translateZ(100px)translateY(4em);
     opacity: 0;
   }
}

<ul class="wrapper">
  <li>Image 1</li>
  <li>Image 2</li>
  <li>Image 3</li>
  <li>Image 4</li>
  <li>Image 5</li>
</ul>

2022-09-30 20:50

I thought it would be difficult to change the class while animating, so I tried it a little differently.
I have to write the CSS settings in javascript, so it may not be a good process, but I hope it will be helpful.

$(function(){
  var$wrapper=$('.wrapper');
  variableList = [
    '#n1', '#n5', '#n4', '#n3', '#n2'
  ];
  var indexArray=[4,3,2,1,0];
  var attrIndex=0;
  var attrList = [
    {
      bottom: 0,
      'z-index': 10,
      opacity:1
    },
    {
      bottom: '18%',
      'z-index': 9,
      opacity:1
    },
    {
      bottom: '30%',
      'z-index': 8,
      opacity: 0.9
    },
    {
      bottom: '40%',
      'z-index': 7,
      opacity: 0.7
    },
    {
      bottom: '50%',
      'z-index': 6,
      // opacity: 0.4
    }
  ];
  varchildAttrList = [
    {width: '100%',
    {width: '83%'},
    {width: '73%'},
    {width: '63%'},
    {width: '53%'}
  ];

  // Example of Using webkitAnimationEnd
  var move = function() {
    varaIndex=attrIndex;
    attrIndex=(attrIndex===idList.length-1) ?0:attrIndex+1;
    var nodes = idList.map(function(id){
      US>return{
        $node —$wrapper.find(id)
      };
    });
    nodes.forEach(function(current,currentIndex,whole){
      var index = indexArray [aIndex];
      // adjust around here if you want to be invisible while on the move
      if(index===4)current.$node.css({opacity:0});
      $('img',current.$node).animate(childAttrList[index],1000);
      current.$node.animate(attrList[index], 1000, function(){
        // adjust around here if you want to be invisible while on the move
        if(index===4)current.$node.animate({opacity:0.4},500);
        current.$node.removeClass('animate');
        if(index===0){
          animate(current.$node);
        }
      });
      aIndex=(aIndex===whole.length-1) ?0:aIndex+1;
    });
  }
  variant=function(obj){
    obj.one('animationendwebkitAnimationEndMSAnimationEnd', function(){
      move();
    });
    obj.addClass('animate');
  }
  // Run the first time
  animate($('#n1'));
/*  
    // Example of Using setInterval
    varmove=function(isFirst){
    varaIndex=attrIndex;
    attrIndex=(attrIndex===idList.length-1) ?0:attrIndex+1;
    var nodes = idList.map(function(id){
      US>return{
        $node —$wrapper.find(id)
      };
    });
    nodes.forEach(function(current,currentIndex,whole){
      var index = indexArray [aIndex];
      // adjust around here if you want to be invisible while on the move
      if(!isFirst&&index===4)current.$node.css({opacity:0});
      $('img',current.$node).animate(childAttrList[index],1000);
      current.$node.animate(attrList[index], 1000, function(){
        // adjust around here if you want to be invisible while on the move
        if(!isFirst&&index===4)current.$node.animate({opacity:0.4},500);
        current.$node.removeClass('animate');
        if(index===0){
          current.$node.addClass('animate');
        }
      });
      aIndex=(aIndex===whole.length-1) ?0:aIndex+1;
    });
  }
  // Run the first one due to a long wait
  move(true);
  setInterval (function() {move(false)},5100);
*/
});

#slide{
  width : 320px;
  margin:0 auto;
  text-align:center;
}
#slideul{
  position:relative;
  height —300px;
  padding:0;
  list-style-type: none;
}
# slide li {
  position:absolute;
  overflow — hidden;
  width : 320px;
  margin:0 auto;
  text-align:center;
  background: #ffff;
}
# slide#n1 {
  bottom:0;
  z-index:10;
  opacity:1;
}
#slide#n1img{
  width: 100%;
}
# slide#n2 {
  bottom: 18%;
  z-index:9;
  opacity:1;
}
#slide#n2img{
  width: 83%;
}
# slide#n3 {
  bottom: 30%;
  z-index —8;
  opacity: 0.9;
}
#slide#n3img{
  width: 73%;
}
# slide#n4 {
  bottom: 40%;
  z-index:7;
  opacity: 0.7;
}
#slide#n4img{
  width: 63%;
}
# slide#n5 {
  bottom: 50%;
  z-index:6;
  opacity: 0.4;
}
#slide#n5img{
  width:53%;
}
img{
  background: #cc;
  width —50px;
  height —70px;
}
/* After stopping 3 seconds, take 2 seconds to run the scaleout keyframes (plus 5 seconds), equal to 5 seconds for js. */
.animate{
  - webkit-animation:scaleout2sease-in-out3s;
  animation —scaleout2sease-in-out3s;
}
/* Zoom n1 to 1.5x and erase*/
@-webkit-keyframes scaleout {
  0% {
    - webkit-transform:scale(1);
  }
  100% {
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}
@-moz-keyframes scaleout {
  0% {
    transform:scale(1);
    - webkit-transform:scale(1);
  }
  100% {
    transform —scale (1.5);
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}
@-webkit-keyframes scaleout {
  0% {
    transform:scale(1);
    - webkit-transform:scale(1);
  }
  100% {
    transform —scale (1.5);
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}
@-o-keyframes scaleout {
  0% {
    transform:scale(1);
    - webkit-transform:scale(1);
  }
  100% {
    transform —scale (1.5);
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}
@keyframesscaleout{
  0% {
    transform:scale(1);
    - webkit-transform:scale(1);
  }
  100% {
    transform —scale (1.5);
    - webkit-transform:scale (1.5);
    opacity: 0;
  }
}

<divid="slide">
  <ul class="wrapper">
    <liid="n1"><img src="alt="Image 1"/><li>
    <liid="n2"><img src="alt="Image 2"/><li>
    <liid="n3"><img src="alt="Image 3"/><li>
    <liid="n4"><img src="alt="Image 4"/><li>
    <liid="n5"><img src="alt="Image 5"/><li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2022-09-30 20:50

I think it's easy to use the library around here.
http://ricostacruz.com/jquery.transit/

2022-09-30 20:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656