Question

JS没什么有趣的：

 $( "#scroll-left" ).click(function() {
        $( "#pics-scroll" ).animate({ "left": "+=50px" }, "slow" );
        });

        $( "#scroll-right" ).click(function() {
        $( "#pics-scroll" ).animate({ "right": "+=50px" }, "slow" );
        });

我的HTML：

<div id="new-products" class="clear-fix">
<button id="scroll-left"></button>
<div id="pics-scroll">
<img src="upload/upd_img_1.png" alt="Обувь">
<img src="upload/upd_img_2.png" alt="Обувь">
<img src="upload/upd_img_3.png" alt="Обувь">
<img src="upload/upd_img_1.png" alt="Обувь">
</div>
<button id="scroll-right"></button>
</div>

我的CSS就在这里（没有什么有趣的）：

#new-products{
        height: 169px;
        position: relative;
        padding: 5px 0 5px 0;
        background: #f2f2f2;
    }

    #new-products img {
        float: left;
        height: 169px;
        width: 170px;
        background: #ffffff;
        width: 170px;
        height: 169px;
        margin: 0 20px 0 0;
    }

    #pics-scroll{
        position: absolute;
        width: 1000px;
        height: 169px;
        margin-left:85px;
    }

    #scroll-left{
        float: left;
        position: absolute;
        cursor: pointer;
        margin: 50px 5px 0 13px;
        width: 54px;
        height: 70px;
        display: block;
        background: url('../images/scroll-left.png')center no-repeat;
    }

    #scroll-right{
        cursor: pointer;
        margin-left: 840px;
        position: absolute;
        margin-top: 50px;
        width: 54px;
        height: 70px;
        display: block;
        background: url('../images/scroll-right.png')center no-repeat;
    }

主要问题是：它无论如何都不会移动。

我不知道，为什么它不起作用。我怎样才能使它发挥作用。

Answer 1

您可以将代码包装在$(window).load(function() {...});中，以确保在执行jQuery代码之前已正确加载所有DOM元素和图像：

$(window).load(function () {
    $("#scroll-left").click(function () {
        $("#pics-scroll").animate({
            "left": "+=50px"
        }, "slow");
    });

    $("#scroll-right").click(function () {
        $("#pics-scroll").animate({
            "right": "+=50px"
        }, "slow");
    });
});

动画Jquery的问题

1 个答案: