我有一个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()不能在我的页面上工作？提前致谢.
问题
您没有将jquery包装在$(document).ready()运行任何jquery事件所需的中.
什么是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>
参考