Использование jquery для достижения анимированных divs

Question

Я хочу использовать UI как http://demo.songpane.com/#/set/c/b для моего webapp, может ли кто-нибудь предложить мне, как я могу достичь этого в jquery. Нужна ли им анимация jQuery или что-то еще, есть ли для этого плагин или мне нужно написать код с нуля. Страница разделена на разные движущиеся div.

Answer 1

Вот очень простой пример с использованием только JQuery: http://jsfiddle.net/7DSmK/

$(document).on('click', '.btn', function() { 
    $('#Content div').hide(); 
    var target = '#' + $(this).html(); 
    $(target).show('slow'); 
}); 

Это просто скрывает все «содержание» дивы, а затем показывает тот, который вы хотите, используя очень простую анимацию, встроенный в JQuery.

Чтобы сделать что-нибудь более интересное, вы хотите использовать переходы JQuery UI или CSS3.

http://jqueryui.com/animate/

http://www.w3schools.com/css/css3_transitions.asp

Answer 2

Существует несколько способов достижения анимации.

Вы можете использовать CSS transition-duration, чтобы указать время анимации. Тогда все, что вам нужно сделать, это изменить правила CSS в jQuery, и они оживут.

Другой способ использования метода jQuery .animate(), который позволяет изменять правила CSS за указанный период времени. jQuery имеет несколько сокращенных методов, встроенных в анимацию, например .fadeIn() и .fadeOut() для установки display элемента на block или none.

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

Конечно, есть библиотеки, такие как Bootstrap и jQueryUI, которые имеют встроенные функции анимации, которые вы можете просто вызвать, если вы не хотите сами писать код.