3

こんにちは私はjqueryに不慣れです私はあなたのより経験豊富な人の一人が私を助けてくれることを望んでいました。コンテナをオーバーフローに設定しています。非表示で、内部に3つのdivがあり、そのうちの2つはオーバーフローしているため非表示になっています。コンテナをクリックするたびに、すべてのdivが右からスライドする順序で表示されるようにしたいと思います。クリックすると2番目のdivが表示されますが、3番目のdivを移動できません。コンテナがクリックされるたびに、内部のdivは100px移動するはずですが、移動しません。なぜそうならないのか説明してください。これがJSフィドルリンクです-> http://jsfiddle.net/FSMMA/

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    .container{
        width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
}
.one,.two,.three{
    display:inline-block;
    position:relative;
}
    .one{
        width:100px;
        height:100px;
    background-color:green;
}
.two{
    width:100px;
    height:100px;
    background-color:red;
}
.three{
    width:100px;
    height:100px;
    background-color:blue;
}
.boxes{
    width:400px;
}
</style>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
    $('.container').click(function(){
        $('.boxes').offset({left :-100})
        });
    });
</script>
<div class="container">
    <div class="boxes">
        <div class="one">
        </div>
        <div class="two">
        </div>
        <div class="three">
        </div>
    </div>
</div>
</body>
</html>
4

4 に答える 4

1

.animate() を好まないのはなぜですか

$(document).ready(function(){
$('.container').click(function(){
    $('.boxes').animate({"left": "-=100px"}, "slow");
    });
});

そして、これを追加

.boxes{
width:400px;
position:absolute;
 }

.one,.two,.three{
display:inline-block;
position:relative;
float:left;

}

于 2012-12-11T06:56:06.637 に答える
0

-100 しか移動していないため、1 つのコンテナーのみを移動します。次の INFG コードを試してください。これにより、前の値から 100 が減り、適切に移動します。

$(document).ready(function(){
 $('.container').click(function(){
    $('.boxes').offset({left : $('.boxes').offset().left-100})
    });
});

更新されたフィドル: http://jsfiddle.net/HBHcC/1/

于 2012-12-11T06:12:30.060 に答える
0

提供された回答に追加するには...次はスライド効果を与えます:

$(document).ready(function(){

     var pos = 1;

     $('.container').click(function(){

     if(pos < 4) {
         $('.boxes div:nth-child(' + pos + ')').animate({ width: 0 }, 1000);
          pos++;
     }

    });

 });​
于 2012-12-11T06:44:08.550 に答える
0

正直なところ、なぜあなたのコードが機能しないのかわかりませんが、他の誰かが提供できる純粋な CSS 修正があるのではないかと思います。そうは言っても、私は CSSJSHTML をいじり、それを機能させました。

HTML では、ほとんどの div の内側にボックスクラスを追加しました。

<div class="container">
  <div class="boxes">
    <div class="one box"></div>
    <div class="two box"></div>
    <div class="three box"></div>
  </div>
</div>​

boxクラスを追加したことで、CSS を少し整理することができました。それはあなたの問題とは何の関係もありませんが、私は自分自身を助けることができませんでした. :-) さらに重要なのは、ボックスを左にフロートさせたことに注意してください。

.container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.box {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
}

.one {
    background-color:green;
}

.two {
    background-color:red;
}

.three {
    background-color:blue;
}

.boxes {
    width:400px;
}​

私の JavaScript では、コンテナーではなく、個々のボックスのクリックをキャプチャしています。これにより、最後のボックスを表示しているかどうかを検出できます。これは、最後のボックスが画面外にスクロールされないようにするためです。また、「ボックス」div のオフセットを変更する代わりに、左マージンを変更しています。最後に、次の 2 つの理由から、offset の代わりに animate を使用することに切り替えました。まず、offset を機能させる方法がわかりませんでした。;-) 次に、アニメーションに遅延を追加して、必要に応じてスライドイン効果を作成できます。

$(document).ready(function(){
    $('.box').on("click", function() {
        // Is this the last div, or is there a next one?
        if ($(this).next().length) {            
            var animSpeed = 200;  // Make this 0 for an instant change
            $('.boxes').animate({marginLeft : "-=100"}, animSpeed);
        }        
    });
});

これはhttp://jsfiddle.net/HBHcC/11/でデモできます。

于 2012-12-11T06:58:13.300 に答える