javascript - Animateapply Transition addClass and removeClass in jQuery? - Stack Overflow

admin管理员组

文章数量:1323524

I am new to jQuery & javascript and making a simple slider by adding and removing class 'active' on next slide which is working fine but seems ugly because there is no animation. Is there any way to animate the process of adding and removing a class? Like:

$('#next').on('click', function(){
    $('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})

At Jquery documentation website I have seen that there is an animate function which is used to animate things. Is it possible to use that function in my case?

Update: I have also tried to apply the CSS transition on div and div.active which is not working.

Css:

   .slider div {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    div.active {
        display: inline-block;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

I am new to jQuery & javascript and making a simple slider by adding and removing class 'active' on next slide which is working fine but seems ugly because there is no animation. Is there any way to animate the process of adding and removing a class? Like:

$('#next').on('click', function(){
    $('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})

At Jquery documentation website I have seen that there is an animate function which is used to animate things. Is it possible to use that function in my case?

Update: I have also tried to apply the CSS transition on div and div.active which is not working.

Css:

   .slider div {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    div.active {
        display: inline-block;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

• javascript
• jquery
• css
• animation
• jquery-animate

Share Improve this question Follow edited Jul 3, 2017 at 21:57 James 33544 silver badges1414 bronze badges asked Jul 3, 2017 at 12:12 user4973696user4973696 3

• You can search for transition in css. Then adding and removing that class can trigger that animation. And yes you can use jquery animation function it has plenty of properties you can set just read their docs it has exameples of how to do it. – user5014677 Commented Jul 3, 2017 at 12:16
• @user5014677 I have applied css animations but they are not working. – user4973696 Commented Jul 3, 2017 at 12:20
• You can't transition the display property...that's probably at the heart of this issue. – Paulie_D Commented Jul 3, 2017 at 14:45

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

From ments of different users I came to know that css transition can not be applied on display: none elements. So instead of display none I applied height 0px; opacity: 0; which worked fine for me.

.slider img{
 height: 0px;
 opacity: 0;
 display: block;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

.slider img.active{
 height: 360px;
 opacity: 1;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

Thanks to the creator of this fiddle which gave me this idea.

.active {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

you cant really animate addClass or removeClass but you could add a transition

but you can use some css:

.item {   
   opacity: 0
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item.active{
   opacity: 1
}

Instead of animation, in your case you can use transitions https://developer.mozilla/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Add animation class:

$(".otp-wrapper").addClass('test');

Remove animation class:

$(".otp-wrapper").removeClass('test');

Stylesheet:

.test {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
      }

@keyframes shake {
        0% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(5px);
        }
        50% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
        100% {
          transform: translateX(0);
        }
      }
      .err-msg{
        font-size:16px;
        font-weight:400;color: red;
      }

Refernece: https://www.w3schools./howto/howto_css_shake_image.asp

本文标签： javascriptAnimateapply Transition addClass and removeClass in jQueryStack Overflow