jQuery UI tabs effects not working

Question

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!

Answer 1

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