0

Sometimes when using JQuery to set the css attribute of an element such as "height", "max-height", it automatically binds animation to the change. Sometimes it is awesome, but it is not always necessary. Is there a way to disable this kind of animation?

Actually what is the exact situation that causes JQuery to automatically bind animations? because I don't always see this kind of behavior. I am not using JQuery-UI.

zkytony
  • 1,242
  • 2
  • 18
  • 35

2 Answers2

2

Perhaps the element you are changing the height of has a css transition property that is responsibe for the animation. 

$(function() {
  $('.myClass').css('width', '100px');
});
.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
}
.transition {
  transition: width 3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
with transition
<div class="myClass transition">
</div>

without transition
<div class="myClass">
</div>

Borrowing from What is the cleanest way to disable CSS transition effects temporarily?

You can then create a class that will override the transition property and toggle that class

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

Note

If you go this route, you may run into the issue of needing to reflow the css

From What is the cleanest way to disable CSS transition effects temporarily? once again:

There are various ways to do this - see here for some. The closest thing there is to a 'standard' way of doing this is to read the offsetHeight property of the element.

One solution that actually works, then, is

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS
changes $someElement.removeClass('notransition'); // Re-enable
transitions
Community
  • 1
  • 1
Eric Phillips
  • 866
  • 7
  • 23
  • This is very likely. The element uses a class css that does have the transition. So I basically need to set transition to "" using jquery, and fill it back up after the height is changed? – zkytony Dec 18 '15 at 02:36
  • there's a good solution here. http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily recommends creating a class to disable the transition and toggling that class, rather than the property directly. that way you don't have to worry about resetting the value – Eric Phillips Dec 18 '15 at 02:38
0

You can use jQuery.fx.off parameter to define if animation should be used. Read about it here

Also you can modify css values directly without modifying function like

    $("#id").css('height', '100px');

instead of

    $("#id").height(100);
m.antkowicz
  • 13,268
  • 18
  • 37