CODEWITHSUNDEEP
javascriptjqueryjquery-ui
AzureMinotaur
AzureMinotaur

Reputation: 696

jQuery UI tabs effects not working

I am trying to fade in tabs when clicked with the jQuery UI, but nothing happens.

The scripts are being loaded fine as the chrome "network" tab says that the GET request was successful in every case and I am able to see the loaded scripts.

This is what I have tried (tabs are made correctly and work fine, but effects don't work)

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js">    </script>

If it matters, I am using Visual Studio 2013, and try fading like below (which seems correct too, as this is what's there in many other answers and working jsfiddles):

  $(document).ready(function () {
    $(".tabbed-box").tabs({
        fx: {
            opacity: 'toggle'
        }
    });

The only thing I can think of is that I am not including a "complete" jquery-ui script, but this is what the Google hosted libraries page gives me. Any ideas are welcome. Thanks!

Upvotes: 2

Views: 1137

Answers (1)

jsetti
jsetti

Reputation: 231

You can use the hide/show properties to create your animation with jQuery 1.11.1: http://api.jqueryui.com/tabs/#option-show

Here is an example:

$("#tabs").tabs({ show: { effect: "fade", duration: 800 } });

jsFiddle

Upvotes: 3

Related Questions