jQuery UI Slide - перемещение содержимого во время анимации

Question

Я создаю сайт, который полагается на эффекты jQuery, и у меня есть проблема с эффектом jQuery Slide. Я использую это с помощью функции toggle на данный момент, но это изменится на более позднем этапе.

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

Проблема в том, что содержимое перемещается только после завершения анимации. Есть ли способ переместить контент, когда анимация все еще работает. Другими словами, я хочу переместить контент вместе с анимацией, но я не хочу называть функцию slide на моем элементе, который должен перемещаться вместе с ним.

Я создал JSFiddle продемонстрировать проблему: http://jsfiddle.net/6Lg9vL8m/6/

Edit: обновление Вопросов и скрипку

Вот обновление на вопрос, и смотрите мою первоначальную обновленную скрипку. Когда вы выполняете эффект слайда в пользовательском интерфейсе jQuery, см. Нижний пример на моей скрипке, поле перемещается вверх и где-то помещено за невидимым экраном (трудно объяснить).

С функцией оживления, см. Верхний пример в моей скрипке, область сжимается, и это то, чего я хочу избежать. Я хочу добиться эффекта, такого как «Слайд», но содержимое под коробкой должно немедленно перемещаться с анимацией, а не после завершения анимации.

Редактировать: Переработал правильный ответ в плагине.

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

Плагин называется «Занавес» и может быть описан как возвышение запрошенного элемента в качестве занавеса и, таким образом, его удаление.

Вот исходный код:

(function($) { 
    $.fn.curtain = function(options, callback) { 
     var settings = $.extend({}, $.fn.curtain.defaults, options); 
     var tabContentsHeight = $(this).height(); 

     $(this).animate({height:0}, settings.duration); 
     $(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() { 
      $(this).css({"margin-top":0}); 

      if ($.isFunction(callback)) { 
       callback(this); 
      } 
     }); 

     return this; // Allows chaining. 
    }; 

    $.fn.curtain.defaults = { 
     duration: 250 
    }; 
}(jQuery)); 

Плагин можно назвать так:

element.curtain({ duration: 250 }, function() { 
    // Callback function goes here. 
}); 

Если кто-то есть замечания или лучший способ решить эту проблему, пожалуйста, поделитесь в комментариях ,

Answer 1

Вы можете сделать это, используя функцию анимации, как это:

$('#square').on('mousedown', function(e) { 
    $(this).animate({height:-200},2500); 
}); 

Demo

Обновленный код, чтобы создать "занавес подъем", как анимация: -

$('#square').on('mousedown', function(e) { 
    $(this).animate({height:-200},2500); 
    $(this).children().animate({"margin-top":"-400px"},2500, function() { 
     $(this).css({"margin-top":0}) 
    }); 
}); 

CSS:

`#square{ 
    overflow:hidden; 
}` 

Demo 2

Answer 2

This - эффект, который вы хотели?

$('#square').on('click', function(e) { 
    $(this).animate({height :0},2500); 
});