jQuery click 运行一次答案

【问题标题】：jQuery click runs one timejQuery click 运行一次
【发布时间】：2014-05-01 13:51:50
【问题描述】：

我正在制作一个带有缩略图的 jQuery 画廊，我有 2 个箭头可以“滚动”这些缩略图。我第一次尝试点击事件，但我的动画只运行一次。

我搜索了互联网并找到了.on( 'click' ) 事件。我试过这个但没有结果。即使使用.off( 'click' ) 删除事件之后。

谁能帮我解决这个问题？

$("#top_slide_button").on( 'click', function () {
    $("#slide_frame").animate( { marginBottom: -50 }, 200);
    $("#top_slide_button").off( 'click' );
});

$("#bottom_slide_button").on( 'click', function () {
    $("#slide_frame").animate( { marginTop: -50 }, 200);
    $("#bottom_slide_button").off( 'click' );
});

【问题讨论】：

sorry...我觉得问题还不够清楚...
你需要知道什么来帮助我？
你能分享html和css吗..尝试使用jsfiddle.net/arunpjohny/z5GD5/1创建一个演示
@ArunPJohny jsfiddle.net/z5GD5/2

标签： javascript jquery click jquery-animate

【解决方案1】：

你可以试试这个：

$("#top_slide_button").off( 'click' ).on( 'click', function () {
    $("#slide_frame").animate( { marginBottom: -50 }, 200);
});

$("#bottom_slide_button").off( 'click' ).on( 'click', function () {
    $("#slide_frame").animate( { marginTop: -50 }, 200);
});

【讨论】：

感谢您的回答！尝试了您的代码，但遇到了同样的问题。

【解决方案2】：

你需要为动画使用相对值

动画属性也可以是相对的。如果提供了一个值前导 += 或 -= 字符序列，则目标值为通过从当前数中加上或减去给定的数字来计算财产的价值。

$("#top_slide_button").on('click', function () {
    console.log('click')
    $("#slide_frame").stop(true).animate({
        marginTop: '-=50'
    }, 200);
});

$("#bottom_slide_button").on('click', function () {
    $("#slide_frame").animate({
        marginTop: '+=50'
    }, 200);
});

演示：Fiddle

【讨论】：

这几乎解决了问题。边距现在比框架更远。因此，您可以随意滚动。那不应该发生。

【解决方案3】：

您的问题是边距设置为50，将其向下移动到50，如果您再次单击它，它会保持在50。您需要增加边距顶部，即每次添加50。

即：

$("#top_slide_button").on('click', function () {
    $("#slide_frame").stop(true).animate({
        marginTop: '-=50'
    }, 200);
});

$("#bottom_slide_button").on('click', function () {
    $("#slide_frame").animate({
        marginTop: '+=50'
    }, 200);
});

http://jsfiddle.net/PbBq2/

【讨论】：

好清楚。但是现在与 Arun P Johny 的答案相同的问题。您可以滚动太远。那不应该发生。