我是 js 新手,想要一个页面上有两个动画菜单。
我在这里有一个例子,但有两个问题。
http://jsfiddle.net/misemefein/k3dKz/5/
1:我希望菜单 div 在页面加载时关闭屏幕并在相关点击时滑入。
目前情况正好相反。
2:动画在 jsfiddle 中工作,但不在浏览器的测试页面上:http: //bit.ly/M7TZrt
任何想法表示赞赏
我是 js 新手,想要一个页面上有两个动画菜单。
我在这里有一个例子,但有两个问题。
http://jsfiddle.net/misemefein/k3dKz/5/
1:我希望菜单 div 在页面加载时关闭屏幕并在相关点击时滑入。
目前情况正好相反。
2:动画在 jsfiddle 中工作,但不在浏览器的测试页面上:http: //bit.ly/M7TZrt
任何想法表示赞赏
您可以更改您的 JavsScript 以及 CSS。你的 CSS 和animate()
函数没有很好地定位元素。
$(document).ready(function() {
$('#slideboys button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
$('#slidegirls button').click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
这是更正的工作小提琴http://jsfiddle.net/k3dKz/7/
还要添加这一行;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
或者
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
在<header>
您的网页部分内,以使您的代码运行。
希望这可以帮助...
仍然需要更新女孩的点击事件,以动画另一个方向。