jQuery点击运行一次

jQuery click runs one time

本文关键字：一次 运行 jQuery      更新时间：2023-09-26

我正在开发一个带有缩略图的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);
});

您需要使用动画的相对值

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

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

您的问题是边距设置为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/

相关文章：