为什么我的点击功能不能在jquery中运行？

Question

我想创建一个包含图像标题和文字的简单旋转木马。当我点击“下一个”范围时，它应显示下两个<li>。但是当我这样做时没有任何反应。

<script type="text/javascript">
    $(document).ready(function() {
        $('#right').click(function() {
            $('li').animate({
                left: '-600px'
            }, 500);
        });
    });
</script>

Fiddle

请参阅this example。

Answer 1

这是一个纯CSS问题。您只需要将position: relative;添加到li，这样就可以在脚本中生成left属性。

.carousel-inner li {
  display: inline;
  float: left;
  margin: 20px;
  border: 1px solid #999;
  padding: 25px;
  border-radius: 20px;
  position: relative; // Add this so setting a left position will work
}

只需尝试在Chrome Inspector中添加它，您就会发现它有效。侨！

Answer 2

将position: relative添加到 .carousel-inner li 。