Question

我正试图从左边动画一个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>

以上是整个事情。我似乎无法找到错误。有人能帮助我吗？

Answer 1

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

<强> 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/

Answer 2

演示中的一些错误：

$（'＃slideleft button'）不正确。它应该是$（'＃slidebottom button'）。

应删除以下css或您不会看到任何内容

#slidebottom .inner{
    display:none;
}

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

使用jQuery动画（滑动）一个div侧面

2 个答案: