javascript - クリック機能がjqueryで機能しないのはなぜですか?

Question

画像のタイトルとテキストを保持する単純なカルーセルを作成したいと考えています。「次の」スパンをクリックすると、次の 2 つが表示されます<li>。しかし、私がそうしても何も起こりません。

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

フィドル

この例を参照してください。

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

.carousel-inner liに追加position: relativeします。