jQuery toggleClass speed not sliding back the same when toggling back

Question

I have the following jquery code to get a div to slide from left to right, but upon clicking again, it instantly goes back to original position (left) without the slide animation. Not sure what I'm doing wrong here.

$('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

HTML:

<style>
    #box{
        position: fixed;
        left:-380px;
    }
    .slideOut{
        position: fixed;
        left:0 !important;
    }
</style>

<div id="box">
    ...
</div>

How are you going to animate the replacement of a string in an attribute? O.o -> [`.toggleClass()`](https://api.jquery.com/toggleclass/); Have a look at [`.animate()`](https://api.jquery.com/animate/) or [`.slideToggle()`](https://api.jquery.com/slideToggle/) — Andreas, Feb 01 '16 at 15:38

Vixed · Accepted Answer · 2016-02-01T16:33:19.517

2

If you are using jQuery UI, then your code works good, just remove !important from your css.

JAVASCRIPT

$('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

CSS

   #box{
        position: fixed;
        left:-380px;
    }
    #box.slideOut{
        left:0;
    }

https://jsfiddle.net/n72z2ym0/

edited Feb 01 '16 at 16:33

answered Feb 01 '16 at 16:19

Vixed

3,429
5
37
68

You're missing the essential part - the missing animation: "_...without the slide animation..._" ;) And still [`.toggleClass()`](http://api.jquery.com/toggleClass/) replaces a CSS class and doesn't do any animations – Andreas Feb 01 '16 at 16:21
@Andreas you're wrong, his code works good. the **!important** made the priority so kills the animation. that's all. check the fiddle https://jsfiddle.net/n72z2ym0/ – Vixed Feb 01 '16 at 16:24
`.toggleClass()` only adds and removes classes. And as there is no transition defined for `.slideOut` or `#box` there is no animation... – Andreas Feb 01 '16 at 16:26
**toggleClass** adds animation using jQueryUI PLEASE STUDY or read https://jqueryui.com/toggleClass/ – Vixed Feb 01 '16 at 16:27
1

but there is no `jquery-ui` tag – Andreas Feb 01 '16 at 16:28
That's why I wrote **If you are using jQuery UI, then your code works good** in my answer. And I think he is using UI because there are no sense in **toggleClass("slideOut", 500, 'easeInQuad');** if not. – Vixed Feb 01 '16 at 16:30
Another things: he said that doesn't works on the second click, so if at the first click works then he is using UI. @Andreas – Vixed Feb 01 '16 at 16:32
I am using UI, which is why the second click doesn't work. I removed the !important but kills the first animation altogether. – Jnsn_ Feb 01 '16 at 17:27
I'd like to add that this worked because of this: #box.slideOut{}. I had it at .slideOut{} only. – Jnsn_ Feb 01 '16 at 17:48
Happy to help @Jnsn_ – Vixed Feb 01 '16 at 17:52

score 1 · Answer 2 · answered Feb 01 '16 at 16:05

1

This is how the toggleClass() method works : .toggleClass( className )
See the documentation

That said, if you want animate your div with this method, you need to deal with CSS3 transitions like this :

$(document).ready(function(){
  $("#slideButton").click(function(){
      $(".box").toggleClass("slideOut");
  });
});

.box{
    width: 380px;
    height: 380px;
    background: red;
    position: fixed;
    left:-380px;
    top: 40px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.slideOut{
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="slideButton">SlideToggle</button>
<div class="box"></div>

answered Feb 01 '16 at 16:05

smdsgn

1,736
1
11
11

That's wrong. He is using Jquery UI because the first click does the animation. So using jqueryUI **toggleClass provide the animation** if you add duration. Read https://jqueryui.com/toggleClass/ – Vixed Feb 01 '16 at 16:36
2

There is no tag jquery-ui, so this is not wrong. And it works. But if he wants to do that with jquery-ui your answer is the right one. – smdsgn Feb 01 '16 at 16:54
I now that there are no jquery ui tag, but he said that works at the first click, so he is using ui. – Vixed Feb 01 '16 at 17:02
Clear for you, not for everyone. Hard to say what he really wants. But I understand your argument and I will upvote your answer if this is what he needs. – smdsgn Feb 01 '16 at 17:07
2

@Vixed You shouldn't invalidate an answer based on assumptions. I upped both answers they both work. – zer00ne Feb 01 '16 at 17:08
@zer00ne You're right, but nobody can say that toggleClass can't provide animations, if doesn't know that. May be other people will look at this question and then what? the solution must be explained, not changed from JS to CSS transition which is not supported from old browser. And a last thing **ease** is not **easeInQuad** – Vixed Feb 01 '16 at 17:16
@Vixed you probably need to calm down. I never said that toggleClass can't provide animations. But because he never talked about jquery-ui I just explained how toggleClass method works with jquery. And zer00ne right, you shouldn't invalidate an answer based on assumptions. – smdsgn Feb 01 '16 at 17:21
But what you mean with **invalidate**? – Vixed Feb 01 '16 at 17:35

jQuery toggleClass speed not sliding back the same when toggling back

2 Answers2