How do I run animation if jQuery gives me a specific class?

If jQuery has a specific class (.animate) in it, I would like to find a specific class (.slideFirst) in it and run the animation, but it doesn't work.
The .animate class is not given from the beginning, but is given when the slide comes first.I put it in at the end of js, but it doesn't work.

// Omitted top

 if(index===0){
      current.$node.addClass('animate');

// I want to add animation after giving the animation class at the top, but it doesn't work.

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

javascript jquery

2022-09-30 19:50

1 Answers

I think you will be able to use either of the following.
·Add position to the element that sets slideFirst
·Use marginLeft instead of left

Also, as Mok2pok commented, if you want to erase the elements, you can use opacity.

Sample
http://codepen.io/negibouze/pen/xGqdyq

$(function(){
  var$wrapper=$('.wrapper');
  variableList = [
    '#n1', '#n5', '#n4', '#n3', '#n2'
  ];
  var indexArray=[4,3,2,1,0];
  var attrIndex=0;
  varattrList=[{
      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%'
    }
  ];

  // Use 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');
    // 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);
      }
    });
  }
  // Run the first time
  animate($('#n1'));
  /*  
      // Use 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);
  */
});

.set-position{
  position:relative;
}

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

#slideul{
  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: #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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<divid="slide">
  <ul class="wrapper">
    <liid="n1"><img src="alt="Image 1"/>
      <div class="set-position">Set position</div>
      <div class="margin_left">Use marginLeft</div>
    </li>
    <liid="n2"><img src="alt="Image 2"/>
      <div class="set-position">Set position</div>
      <div class="margin_left">Use marginLeft</div>
    </li>
    <liid="n3"><img src="alt="Image 3"/>
      <div class="set-position">Set position</div>
      <div class="margin_left">Use marginLeft</div>
    </li>
    <liid="n4"><img src="alt="Image 4"/>
      <div class="set-position">Set position</div>
      <div class="margin_left">Use marginLeft</div>
    </li>
    <liid="n5"><img src="alt="Image 5"/>
      <div class="set-position">Set position</div>
      <div class="margin_left">Use marginLeft</div>
    </li>
  </ul>
</div>

Reference
jQuery animate({left:"+=10")notworking

2022-09-30 19: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