Как мне сделать переходы CSS с вкладками jQuery UI?

Question

Мне нужны плавные переходы между вкладками, когда пользователь нажимает на вкладку.

Я знаю, что вкладки jQuery поддерживают базовую анимацию (см. Этот вопрос о animation fx ), но как мне это сделать?плавные переходы?

Answer 1

все стало проще с течением времени, теперь это встроенная опция для этого, например, сдвиг влево и вправо - просто:

$("#tabs .tabs-container-wrapper .tabs-container").tabs({
        hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
        show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});

Answer 2

Вам нужно будет сделать несколько вещей, чтобы это заработало:

1. Не используйте CSS, который поставляется с jQuery UI

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

3. Добавить CSS для «левого» перехода. Например:

   #tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
   

4. Когда выбрана вкладка, измените «левое» значение.

   $(function() {
     var onTabChange = function(event, ui) {
       $("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
     };
     $('#tabs').tabs().bind('tabsselect', onTabChange);
   });
   

См. этот смысл для полного рабочего примера .

Это будет работать с современными браузерами, которые поддерживают переходы и возвращаются к нормальному поведению вкладок, если оно не поддерживается.