从右向左滑动和从左向右滑动（不起作用）

我想知道为什么JSFIDDLE可以正常工作，但是在我的服务器上却无法工作。请看下面的以下代码：

的HTML

<div class="project">
    <div class="project-col2">
        <div class="project-mid-box">
            <ul>
                <a class="myButton"> <li> Project List 1  </li> </a> 
                <a class="myButton"> <li> Project List 2  </li> </a> 
            </ul>
        </div>
    </div>

    <div class="project-col3 myDiv">
        <div class="project-mid-box">
            <p> HERE </p>
        </div>
    </div>  

</div>

的CSS

.project {overflow:hidden;}
.project h3 {color:#FFF;font-weight:normal;}
.project-col2 {float:left;width:50%;position:relative;}
.project-col3 {float:left;width:30%;position:relative;}
.project-mid-box {padding-left:10px;}
.project-mid-box ul li {border:1px solid #CCC;margin:2px 0;border-radius:5px;padding:5px;line-height:25px;}
.project-mid-box ul li:hover {background-color:#f7f7f7;
.myDiv {display:none;}

JS-我添加了一个功能，因为在JSfiddle中会自动添加。

<script type="text/javascript">
$(document).ready(function() { 
    $(".myButton").click(function () {
        // Set the effect type
        var effect = 'slide'; 
        // Set the options for the effect type chosen
        var options = { direction: 'right' };
        // Set the duration (default: 400 milliseconds)
        var duration = 700;
        $('.myDiv').toggle(effect, options, duration);
    });
})  
</script>

最后，我没有忘记获取外部源jquery库

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"> </script>

它应该完全可以在我的服务器上工作，但是根本无法工作。我想念什么吗？