我正在尝试为左侧的 div 设置动画。我正在学习网络上的一个教程，但由于某种原因查询不起作用。我不明白为什么。查询有问题吗？
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head>
<title>jquery practice page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style type="text/css">
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #ffc;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4c5;
color: #333;
}
#slidebottom .inner{
display:none;
}
.slide button {
margin: .7em 0 0 .7em;
}
</style>
</head>
<body>
<div id="slidebottom" class="slide">
<button>slide it</button>
<div class="inner">This is supposed to slide in from the left</div>
</div>
</body>
</html>
以上是全部内容。我似乎无法找到错误。有人可以帮助我吗？
最佳答案
在您的代码中需要编辑三样东西:
<强>1。错误的选择器:
改变
$('#slideleft button').click(function() {
到
$('#slidebottom button').click(function() {
<强>2。元素需要可见:
您将滑动元素隐藏在您的 CSS 中。因此，在将其滑入之前，您需要使其再次可见。
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0,
opacity: "show"
});
<强>3。元素在错误的位置
您还需要将滑动 div 向左移动，这样它会在第一次按下按钮时滑入:
slide .inner {
position: absolute;
left: -350px;
查看这个 JSFiddle: http://jsfiddle.net/ax4AC/2/
关于jquery - 使用 jQuery 横向动画(滑动)一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14540476/