JQuery на Chrome имеет задержку при применении CSS

Question

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

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

Проблема заключается в том, что анимация оставляет позади призрачную миниатюру, которая исчезает, когда анимация исчезает.Кроме того, когда он анимирует изображение карусели вниз, возникает мерцание, поскольку модальное изображение разрушается до того, как миниатюра снова становится видимой.Я могу решить эту проблему, установив тайм-аут на 50 мс для уничтожения модального режима, но это, вероятно, просто большая задержка на основе производительности.

некоторый код:

function(){
      $('#myModal .current .blur').remove(); // remove the low-quality blurred thumbnail that's a loading curtain for the carousel image
      $(state.current.Img).css({'opacity':'1'}) // set the opacity of the hidden image. opacity seems to cause less of a flicker than visibility. display: none doesn't work because I need to do math on the hidden thumbnail's position
        $('#myModal').modal('hide') // hide the modal
        $('#myModal>a').remove() // empty out the modal for future use
      }
}

Я также пробовалэто, основываясь на фрагменте, который я нашел:

function(){
      $('#myModal .current .blur').remove();
      $(state.current.Img).css({'opacity':'1'}).promise().done(function(){
        $('#myModal').modal('hide')
        $('#myModal>a').remove()
      }
}

Модальное удаление не ждет перерисовки CSS независимо от того, что я делаю.