john3825 john3825 - 1 month ago 10
jQuery Question

How to manage jQuery ui tabs fx: toggle option and activate: function () at the same event?

How to manage "jQuery ui tabs fx: toggle option" and "activate: function ()" at the same event?

If you put jQuery fx: toggle fade option and activate: function at the same click event, they stop working. Please tell me how to use them at the same click event.

$(function() {
$("#tabs").tabs( {fx: toggle {opacity ..... } });
// and
$("#tabs").tabs({ activate: function () { .... } });
// together
});


for the event handle of ui activate event.

jQuery and UI versions from Google ajax hosted library are 1.10.2 and 1.10.3 minified.

Answer

Have you tried this way?

$(function () {
     $("#tabs").tabs({
         show: {
             effect: "fadeIn",
             duration: 500,
             delay: 500
         },
         hide: {
             effect: "fadeOut",
             duration: 500,
             delay: 500
         },
         activate: function (event, ui) {
             // Just for demonstrating
             $(ui.newPanel).css("color", "red");
         }
     });
 });

Demo: http://jsfiddle.net/HgyBM/1/