

class="n2"からclass="n1"に移動する際、滑らかにスーッと移動させたいのですが、うまくいきません。  
今は、かくかくしています。  
jsでclassを変更してcssのpositionで位置をズラしているのですが、滑らかに移動（変更）させるには、どこにどのように書いたらよいでしょうか。ご教示の程よろしくお願いいたします。

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

[code]

    $(function() {
      var $wrapper = $('.wrapper');
      var classNameList = [
        'n5', 'n4', 'n3', 'n2', 'n1',
        /*'n6', 'n7', 'n8', 'n9'*/
      ];
      setInterval(function() {
        var nodes = classNameList.map(function(className) {
          return {
            className: className,
            $node: $wrapper.find('.' + className)
          };
        });
        var nodes3 = new Array(classNameList.length);
        for (var i = 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);
    })();
[/code]

[code]

    #slide {
      width: 320px;
      margin: 0 auto;
      text-align: center;
    }
    
    #slide ul {
      position: relative;
      height: 300px;
    }
    
    #slide li {
      position: absolute;
      overflow: hidden;
      width: 320px;
      margin: 0 auto;
      text-align: center;
      background: #FFF;
    }
    
    #slide .n1 {
      /* アニメーション前は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仮の設定 */
    
    img {
      background: #ccc;
      width: 50px;
      height: 70px;
    }
    
    
    /* 3秒止めてから2秒かけてscaleoutのkeyframesを実行（足して5秒）。jsの5秒と同じ。 */
    
    .n1 {
      -webkit-animation: scaleout 2.0s ease-in-out 3.0s;
      animation: scaleout 2.0s ease-in-out 3.0s;
    }
    
    
    /* n1を1.5倍に拡大して消す */
    
    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1.0)
      }
      100% {
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
    
    @keyframes scaleout {
      0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
      100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <div id="slide">
      <ul class="wrapper">
        <li class="n1">
          <img src="img/01.jpg" width="" height="" alt="">
        </li>
    
        <li class="n2">
          <img src="img/02.jpg" width="" height="" alt="">
        </li>
    
        <li class="n3">
          <img src="img/03.jpg" width="" height="" alt="">
        </li>
    
        <li class="n4">
          <img src="img/04.jpg" width="" height="" alt="">
        </li>
    
        <li class="n5">
          <img src="img/05.jpg" width="" height="" alt="">
        </li>
      </ul>
    </div>
[/code]


CC BY-SA 4.0
2015-06-03T04:15:05.603
10933
2019-12-13T18:01:33.307
2019-12-13T18:01:33.307
32986
8745
question
javascript jquery
jQueryまたはJSまたはcss3のanimationで滑らかに移動させるには？


アニメーションしながらクラスを変更するのは難しそうな気がしたので、ちょっと違う感じでやってみました。  
CSSの設定値をjavascriptにも書かないといけないので良い処理とは言えないかも知れませんが、参考になれば幸いです。

[code]

    $(function() {
      var $wrapper = $('.wrapper');
      var idList = [
        '#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
        }
      ];
      var childAttrList = [
        {width: '100%'},
        {width: '83%'},
        {width: '73%'},
        {width: '63%'},
        {width: '53%'}
      ];
    
      // webkitAnimationEndを使用する例
      var move = function() {
        var aIndex = attrIndex;
        attrIndex = (attrIndex === idList.length - 1) ? 0 : attrIndex + 1;
        var nodes = idList.map(function(id) {
          return {
            $node: $wrapper.find(id)
          };
        });
        nodes.forEach(function(current, currentIndex, whole) {
          var index = indexArray[aIndex];
          // 移動中は見えなくする場合はこの辺で調整する
          if (index === 4) current.$node.css({opacity:0});
          $('img', current.$node).animate(childAttrList[index], 1000);
          current.$node.animate(attrList[index], 1000, function() {
            // 移動中は見えなくする場合はこの辺で調整する
            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;
        });
      }
      var animate = function(obj) {
        obj.one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function () {
          move();
        });
        obj.addClass('animate');
      }
      // 最初の1回を実行
      animate($('#n1'));
    /*  
        // setIntervalを使用する例
        var move = function(isFirst) {
        var aIndex = attrIndex;
        attrIndex = (attrIndex === idList.length - 1) ? 0 : attrIndex + 1;
        var nodes = idList.map(function(id) {
          return {
            $node: $wrapper.find(id)
          };
        });
        nodes.forEach(function(current, currentIndex, whole) {
          var index = indexArray[aIndex];
          // 移動中は見えなくする場合はこの辺で調整する
          if (!isFirst && index === 4) current.$node.css({opacity:0});
          $('img', current.$node).animate(childAttrList[index], 1000);
          current.$node.animate(attrList[index], 1000, function() {
            // 移動中は見えなくする場合はこの辺で調整する
            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;
        });
      }
      // 待ち時間が長いので最初の1回を実行
      move(true);
      setInterval(function() { move(false) }, 5100);
    */
    });
[/code]

[code]

    #slide {
      width: 320px;
      margin: 0 auto;
      text-align: center;
    }
    #slide ul {
      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: #fff;
    }
    #slide #n1 {
      bottom: 0;
      z-index: 10;
      opacity: 1;
    }
    #slide #n1 img {
      width: 100%;
    }
    #slide #n2 {
      bottom: 18%;
      z-index: 9;
      opacity: 1;
    }
    #slide #n2 img {
      width: 83%;
    }
    #slide #n3 {
      bottom: 30%;
      z-index: 8;
      opacity: 0.9;
    }
    #slide #n3 img {
      width: 73%;
    }
    #slide #n4 {
      bottom: 40%;
      z-index: 7;
      opacity: 0.7;
    }
    #slide #n4 img {
      width: 63%;
    }
    #slide #n5 {
      bottom: 50%;
      z-index: 6;
      opacity: 0.4;
    }
    #slide #n5 img {
      width: 53%;
    }
    img {
      background: #ccc;
      width: 50px;
      height: 70px;
    }
    /* 3秒止めてから2秒かけてscaleoutのkeyframesを実行（足して5秒）。jsの5秒と同じ。 */
    .animate {
      -webkit-animation: scaleout 2s ease-in-out 3s;
      animation: scaleout 2s ease-in-out 3s;
    }
    /* n1を1.5倍に拡大して消す */
    @-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;
      }
    }
    @keyframes scaleout {
      0% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
      100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
[/code]

[code]

    <div id="slide">
      <ul class="wrapper">
        <li id="n1"><img src="" alt="イメージ1"/></li>
        <li id="n2"><img src="" alt="イメージ2"/></li>
        <li id="n3"><img src="" alt="イメージ3"/></li>
        <li id="n4"><img src="" alt="イメージ4"/></li>
        <li id="n5"><img src="" alt="イメージ5"/></li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]


CC BY-SA 3.0
2015-06-03T09:17:28.030
10942
2015-09-09T02:05:18.530
2015-09-09T02:05:18.530
3516
3516
10933
answer


この辺のライブラリを使われると簡単だと思います。  
<http://ricostacruz.com/jquery.transit/>


CC BY-SA 3.0
2015-06-03T13:01:29.620
10954
2015-06-03T13:01:29.620
9982
10933
answer


cssのanimationなら、transformを変化させると滑らかです。  
z軸の移動をさせれば、重なり順もちゃんとシミュレートされます。  
ループする仕組みもjsより簡素・安全に書けるのでおすすめです。

[code]

    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;
       }
    }
[/code]

[code]

    <ul class="wrapper">
      <li>イメージ1</li>
      <li>イメージ2</li>
      <li>イメージ3</li>
      <li>イメージ4</li>
      <li>イメージ5</li>
    </ul>
[/code]


CC BY-SA 3.0
2015-10-11T16:12:07.047
17537
2015-10-11T16:12:07.047
12727
10933
answer