Question

我正在使用缩略图创建一个jQuery库，我有2个箭头可以“滚动”这些缩略图。我首先尝试使用click事件，但我的动画只运行一次。

我在互联网上搜索了.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' );
});

Answer 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);
});

Answer 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

Answer 3

您的问题是边距设置为50，将其移至50，如果再次单击它，它将保持在50.您需要增加margin-top，即每次增加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/

jQuery单击运行一次

3 个答案: