Javascript jqueryclick只运行一次

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

我在互联网上搜索了

.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' );
});

您可以尝试以下方法：

$("#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);
});

---

您需要为动画使用相对值

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

---

演示：

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

即：

---

对不起。。。我认为这个问题还不够清楚…你需要知道什么来帮助我？你能分享html和css吗。。尝试使用@ArunPJohny创建一个演示，谢谢您的回答！尝试了你的代码，但遇到了同样的问题。这几乎解决了问题。现在，边距比边框更远。所以你可以滚动到你想要的地方。这不应该发生，好的，明白了。但是现在的问题和Arun P Johny的答案一样。你可以滚动太远。这不应该发生。

$("#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);
});

$("#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);
});