

jQueryで、特定のクラス（以下.animate）が付与されていたら、その中の特定のクラス（.slideFirst）を探してアニメーションを実行させたいのですが、うまくいきません。  
.animateのクラスは、最初から付与されているものではなく、スライドが一番前に来た時に、付与されるものです。以下、jsの一番最後に入れたのですが、動きません。

//上部省略

[code]

    if (index === 0) {
          current.$node.addClass('animate');
    
[/code]

//上部、animateクラスを付与した後に、アニメーション実行を入れたいのですが、動きません。

[code]

    $(function(){
        $('.animate').find('.slideFirst').stop().animate({left: '-500px', display: 'none'}, {'duration':500,'easing':'linear'});
    });
    
[/code]


CC BY-SA 3.0
2015-06-09T06:43:03.780
11164
2019-12-13T20:02:20.197
2015-06-09T15:59:20.520
3516
8745
question
javascript jquery
jQueryで特定のクラスが付与されていたら、アニメーションを実行するには？


下記のどちらかで動くようになると思います。  
・`slideFirst`を設定している要素に`position`を追加する  
・`left`の代わりに`marginLeft`を使用する

また、mok2pokさんがコメントに記載しているように、要素を消したいのであれば`opacity`を使用すればいけると思います。

サンプル  
<http://codepen.io/negibouze/pen/xGqdyq>

[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');
        // position
        $('.animate').find('.set-position').stop().animate({
          left: '-150px',
          opacity: 0
        }, {
          'duration': 1000,
          'easing': 'linear',
          complete: function() {
            $(this).animate({
              left: '0px',
              opacity: 1.0
            }, 1500);
          }
        });
        // marginLeft
        $('.animate').find('.margin_left').stop().animate({
          marginLeft: '-150px',
          opacity: 0
        }, {
          'duration': 1500,
          'easing': 'linear',
          complete: function() {
            $(this).animate({
              marginLeft: '0px',
              opacity: 1.0
            }, 1000);
          }
        });
      }
      // 最初の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]

    .set-position {
      position: relative;
    }
    
    #slide {
      width: 320px;
      margin: 0 auto;
      text-align: center;
    }
    
    #slide ul {
      position: relative;
      height: 300px;
      list-style: none;
      padding-left: 0;
    }
    
    #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]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <div id="slide">
      <ul class="wrapper">
        <li id="n1"><img src="" alt="イメージ1" />
          <div class="set-position">positionを設定</div>
          <div class="margin_left">marginLeftを使用</div>
        </li>
        <li id="n2"><img src="" alt="イメージ2" />
          <div class="set-position">positionを設定</div>
          <div class="margin_left">marginLeftを使用</div>
        </li>
        <li id="n3"><img src="" alt="イメージ3" />
          <div class="set-position">positionを設定</div>
          <div class="margin_left">marginLeftを使用</div>
        </li>
        <li id="n4"><img src="" alt="イメージ4" />
          <div class="set-position">positionを設定</div>
          <div class="margin_left">marginLeftを使用</div>
        </li>
        <li id="n5"><img src="" alt="イメージ5" />
          <div class="set-position">positionを設定</div>
          <div class="margin_left">marginLeftを使用</div>
        </li>
      </ul>
    </div>
[/code]

参考  
[jQuery animate({left:“+=10”}) not
working](https://stackoverflow.com/questions/5723230/jquery-
animateleft-10-not-working)


CC BY-SA 4.0
2015-06-10T09:17:03.907
11218
2019-12-13T20:02:20.197
2019-12-13T20:02:20.197
32986
3516
11164
answer