0

我有一个 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() 在我的页面上不起作用？提前致谢。

4

4 回答 4

6

问题

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

正在发生的事情是 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>

参考

于 2012-05-03T01:24:03.620 回答
3

它不起作用，因为您在加载页面之前执行了脚本。当您的脚本运行时，您搜索的元素尚不存在，因此您的 jQuery 选择器找不到任何可操作的元素。

将你的函数包装在一个文档就绪块中，你应该已经准备好了。

jQuery(function(){
    your code here
})

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

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

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

于 2012-05-03T01:22:47.260 回答
0

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

...
<script>
    $('.sv_play_button').toggle(function(){
        $('#video').animate({left: '346'}, "fast");
    },function(){
        $('#video').animate({left: '0'}, "fast");
    });​
</script>
</body>
于 2012-05-03T01:42:28.827 回答
0

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

于 2015-07-27T09:58:01.337 回答