Question

我有一个jsFiddle工作我想要的方式：http://jsfiddle.net/6wuUc/64/

但出于某种原因，当我使用完全相同的代码时，单击按钮时我没有得到动画。这是我在页面上使用的代码。

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<link rel="stylesheet" href="_/css/style.css">

<script src="_/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
</script>

</head>

<body>

<div id="video">
    <div class="sublime">
        <p class="sv_play_button">Click</p>
    </div>    
</div>

</body>
</html>

CSS：

#video, #video .sv_play_button {position: absolute;}

#video { margin-left: -346px; width: 670px; height: 546px; background-color: blue;}

.sublime { width: 1016px; height: 546px; background-color: red; opacity: 0.8; }

.sv_play_button {padding: 5px; background-color: yellow; top: 0px; right:0px; }

任何人都知道为什么toggle（）不能在我的页面上运行？提前谢谢。

Answer 1

<强>问题

您没有将jquery包装在运行任何jquery事件所需的$(document).ready()中。

什么是hapenning是javascript试图在jquery被加载之前运行jquery代码，这就是为什么你必须等到文档加载（使用.ready()）。

您的新javascript应如下所示：

$(document).ready( function() {
$('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
});

注意：请记住，您的所有功能必须在此之外，否则它们将无法调用。还要记住，这个包装器是一个函数，因此必须在它之外定义全局变量。

如果你没有引用它，你需要像这样引用jquery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<强>参考

$(document).ready()

Answer 2

它无效，因为您在加载页面之前执行了脚本。当你的脚本运行时，你搜索的元素还不存在，所以你的jQuery选择器找不到任何行动。

将您的函数包装在文档就绪块中，您应该全部设置。

jQuery(function(){
    your code here
})

参考：http://api.jquery.com/jQuery/#jQuery3

<击> 切换也不支持你调用它的方式。 http://api.jquery.com/toggle/

<击>

~~你不能传递两个函数（据我所知），因为切换只显示或隐藏一个元素。~~编辑：MagicDev指出toggle event api

Answer 3

您也可以将脚本移至</body>标记正上方的页面底部。

...
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });
</script>
</body>

Answer 4

您还没有将jquery包装在$（document）.ready（）中，这是运行任何jquery事件所必需的。

为什么切换（）不起作用？

4 个答案: