All geek questions in one place

JQuery UI - addClass removeClass - CSS values ​​stuck

I am trying to make a simple animation.

  • You are showing a div. It animates correctly.
  • You are hiding a div. Right.
  • You show the div again. It shows, but no animation. It gets stuck in meaning when you interrupted it.

So, for some reason, CSS interpolation that occurs during [add | remove] class is stuck there. The second time the class [add | remove] is actually running, but the css parameter that it sets from the class is ignored (I think it's clouded). How can I fix this WITHOUT resorting to .animate and hard-coded style values? The thing is to put the endpoint of the animation in the css class.

Thanks!

<!doctype html> <style type="text/css"> div { width: 400px; height: 200px; } .green { background-color: green; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#show').bind({ click: function() { showAndRun() } }) $('#hide').bind({ click: function() { $('div').stop(true, false).fadeOut('slow') } }) function showAndRun() { function pulse() { $('div').removeClass('green', 2000, function() { $(this).addClass('green', 2000, pulse) }) } $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse) } }) </script> <input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" /> <div style="display: none;"></div>

You can also see what it does here in jsbin

+4
source share
1 answer

I understood the solution. Not sure I'm happy with that though. This is essentially a very bad "reset" CSS when show clicked.

Animation loops forever. Therefore, I cannot rely on the jQuery queue (finite length). I have to get the loop through the callback as shown in the code. The problem that causes: you cannot .stop(true, true) . The first truth clears the queue, but there is nothing in the animation that is currently running. So it's useless. The second true goes to the last animation in the queue. Again, it is useless, since we will actually remain in one that obsesses with ourselves. The second arg must be false to interrupt an infinite loop.

Problem with interruption. It leaves css where it is. Now you are stuck with random css details for everything that your animation has interpolated (in my case background-color ). I also wanted the interruption to be instantaneous. So there was no other way.

In my case, background-color set to element.style during the animation (detected during validation in browser tools), which cancels everything else that happens. This support did not exist until the first animation began to work. Then it was interrupted, and supposedly the future style was stuck there (I think).

So you are starting the animation again. Green class is applied. jQuery calculates a range of colors to make progress. Derives it from #shadeofgreen to #thesameshadeofgreen, because the stuck element.styles value overrides everything the class provides. Thus, the animation slides between two colors of the same color. He works! But the color does not change.

So, the correction in my case is not terrible, but I'm still not sure that I like it, because I'm not sure that it can be easily applied to various situations.

Edit

 $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)

to

 $('div').stop(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse)

The key is

 .removeAttr('style').hide().addClass('green')

This is essentially your css reset. It is guaranteed to always be there when you need it, because it happens exactly before the thing appears again.

Note that placing !important in the color of the green css class does not work, because it (seems to) override element.styles (which uses jQuery animation) and you will not get the desired result.

Of course, I'm still open to suggestions. I probably missed something since I just started looking at CSS and jQuery at the top of the week.

You can see the effects of .removeAttr('style') in the fixed code here on jsbin .

+2
source

Source: https://habr.com/ru/post/1307086/

More articles:


All Articles