1

jQuery初心者はこちら。

2つのボタンで簡単な横スクロール機能をやりたいです。アニメイトでやりたい。しかし、ボタンの1つをクリックしても何も起こりません...

jQueryコードは次のとおりです。

<script type="text/javascript">
$(document).ready(function() {
    $('#right-button').click(function {
        $('#box').animate({
        left: +="200px"
        }, "fast");
    });

    $('#left-button').click(function {
        $('#box').animate({
        left: -="200px"
        }, "fast");
    });
});
</script>

これは HTML コードです。

<section id="main">
    <span class="scrollbutton left" id="left-button">(</span>
    <span class="scrollbutton right" id="right-button">)</span>
    <div id="box">
        <div class="column"></div>
        ...
    </div>
</section>

（a-Tagでも試しました）

Aaaaandここにcssがあります：

#main {
    border: solid 1px #fff;
    max-height: 480px;
    width: auto;
    display: block;
    overflow: hidden;
    background: #ddd;
}

#main #box {
    width: 2250px;
    display: inline;
    float: left;
    position: relative;
}

#main .column {
    float: left;
    display: inline;
    padding: 10px;
    width: 429px;
    border-left: solid 1px #333;
    height: 460px;
}

.scrollbutton {
    font-family: "WebSymbolsRegular";
    font-size: 30px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

おそらく非常に素朴なエラーですが、それが何であるかはわかりません...助けていただければ幸いです:)

PS: ここで見つけることができます: http://patrickmanser.ch/pixelsword/

4

4 に答える 4

2 
$('#right-button').click(function() {
        $('#box').animate({
        left: "+=200px"
        }, "fast");
    });

    $('#left-button').click(function() {
        $('#box').animate({
        left: "-=200px"
        }, "fast");
    });

関数（） ;-）

于 2012-06-29T09:56:38.193 に答える
1

試す：

$(document).ready(function() {
    $('#right-button').click(function {
        $('#box').animate({
        left: "+=200px"
        }, "fast");
    });

    $('#left-button').click(function {
        $('#box').animate({
        left: "-=200px"
        }, "fast");
    });
});
于 2012-06-29T09:26:45.733 に答える
0

アニメーション関数 At の構文が間違っています

left: +="200px"

+= 記号は引用符で囲む必要があります。だから、このようにする必要があります

left: "+=200px"

他のパラメーターについても同じことを行います。

さらに、

  1. #box の代わりに .column を移動する必要があります。.column は #box 内にあります。むしろ動かしたほうがいいと思います。
  2. put position:relative to .column.
  3. 少なくとも .column から float:left を削除します。

ここで動作するフィドルを参照してください http://jsfiddle.net/gaLKc/

于 2012-06-29T09:27:12.440 に答える
0 
 $('#right-button').click(function {
    $('#box').animate({
    left: "+=200"
    }, "fast");
});

「200px」ではなく、「=+200」にする必要があります

于 2012-06-29T09:34:50.787 に答える