jQuery - Мерцание при объединении slideToggle и анимации

Question

Я пытаюсь использовать скрытый div и когда я нажимаю кнопку, чтобы сделать ее видимой, я хочу, чтобы она «оттолкнула» часть другого div, другими словами, размер содержащего div остается неизменным.

Теперь я получил это, но div ниже скрытого div мерцает или немного подпрыгивает вверх и вниз. Вероятно, это связано с тем, что мои анимации не происходят одновременно.

Ниже мой код:

HTML:

<div id="wrapper"> 
    <div id="button">CLICK</div> 
    <div id="content"></div> 
    <div id="hidden"></div> 
    <div id="bottom"></div> 
</div> 

CSS:

#wrapper { 
    border: 1px solid green; 
    width 300px; 
} 
#content { 
    border: 1px solid red; 
    height: 200px; 
} 
#hidden { 
    border: 1px solid blue; 
    height: 100px; 
} 
#bottom { 
    height: 20px; 
    border: 1px solid purple; 
} 

JAVASCRIPT

$("#button").click(function (e) { 
     var newHeight = $("#content").height(); 
     var hiddenHeight = $("#hidden").outerHeight(); 
     var visible = $("#hidden").is(":visible"); 

     newHeight += (visible ? hiddenHeight : -hiddenHeight); 

     $("#hidden").slideToggle({ 
      duration: 200, 
      queue: false 
     }); 

     $("#content").animate({ 
      height: newHeight 
     }, { 
      duration: 200, 
      queue: false 
     }); 
    }); 

скрипку: http://jsfiddle.net/2exxrs1n/

У вас есть идеи, как исправить это или альтернативное решение моей проблемы?

Answer 1

Я предполагаю, что анимация jquery не идеально синхронизирована. Возможно, попробуйте рассмотреть переходы CSS3.

transition-duration: 0.5s; 

Я обновил your fiddle здесь с примером