简单的Jquery动画不起作用在Jsfiddle上工作

时间:2013-03-12 18:26:06

标签: jquery

现在为此疯狂......

我正在尝试使用jsFiddle上的动画来工作本地/ ftp,但没有任何反应。

我已经包含了所有这个库的

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

我可以运行一个具有函数$(this).hide(的动画......但正如我所说,不是动画函数。

这是我正在使用的脚本。

$(".wrapper").mouseenter( function() {
    $(this).animate({
        left: -1*$(".leftbox").width()
    }, 500);
});

$(".wrapper").mouseleave( function() {
    $(this).animate({
        left: "0px"
    }, 500);
});

这是我复制粘贴到我的索引页面的jsFiddle。没有改变什么。 http://jsfiddle.net/ewNpL/1/

1 个答案:

答案 0 :(得分:1)

发表评论的答案:

尝试将所有js / jQuery代码包装在就绪处理程序中,如

$(function(){
 $(".wrapper").mouseenter( function() {
    $(this).animate({
        left: -1*$(".leftbox").width()
    }, 500);
});

$(".wrapper").mouseleave( function() {
    $(this).animate({
        left: "0px"
    }, 500);
});

});

建议使用ready处理程序,以便在javascript开始显示其魔法之前,DOM应该准备就绪,出于同样的原因,它建议在标记之后模拟所有脚本部分。

为什么你的代码在小提琴中运行良好?因为默认情况下jsfiddle将脚本部分包装在就绪处理程序中....