0

我正在尝试从左侧为 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>

以上就是全部内容。我似乎无法找到错误。有人能帮我吗？

4

2 回答 2

1

在您的代码中需要编辑三件事：

1.错误的选择器：
change

$('#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/

于 2013-01-26T19:33:27.110 回答
0

演示中的一些错误：

$('#slideleft button') 不正确。它应该是 $('#slidebottom button')。

应该在css下面删除这个，否则你什么也看不到

#slidebottom .inner{
    display:none;
}

在这里演示：http: //jsfiddle.net/8FLZC/1/

于 2013-01-26T19:13:08.033 回答