Блог

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

Текущий код….

 <script type="text/javascript">
    $(window).load(function () {
        $('#tabs').tabs({
            fx: {
                height: "toggle",
                duration: 1000
            }
        });
    });
    function changeTab(tabID) {
        $('#tabs').tabs('select', tabID);
    }
</script>
@if (ViewBag.SelectedTab != null)
{
    <script type="text/javascript">
        $(window).load(function(){
            $('#tabs').delay(500).tabs('select', @(ViewBag.SelectedTab - 1));
            $('.Equalize').equalHeights();
        });
    </script>
}
 

Я включил код MVC3 на всякий случай, хотя я не считаю, что это должно повлиять.

Может ли кто-нибудь указать мне, как это сделать, или если это вообще возможно с существующими возможностями jquery / jQueryUI / tabs?

В настоящее время я сомневаюсь, что для этого есть возможность. Таким образом, обходным путем может быть css скрытие исходной вкладки перед использованием инициализации display:none , а затем добавление анимации для отображения сгенерированной вкладки с помощью create события tabs.

 $( "#tabs" ).tabs({ fx: { opacity: 'toggle'
                         },                 
       create: function(event, ui) {
           $(this).animate({opacity: 'toggle'},3000);             
        }                  
});
 

Пример здесь
http://jsfiddle.net/Quincy/ZA56n/2 /