Question

我正在使用上一个/下一个按钮制作最简单的垂直旋转木马。我几乎在那里，但我没有想出以下内容：

var shortnewsblockHeight = $(".shortnewsblock").outerHeight();
var totalnewsblocks = $(".shortnewsblock").length;
var i = 0;
$(".stamp.long a.prev").css({ "opacity": "0.3", "text-decoration": "none", "cursor": "default" });

goDown();
goUp();

function goDown() {
    $(".stamp.long a.next").click(function () {
        $(".stamp.long a.prev").animate({
            'opacity': '1'
        }, 300);
        $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });
        i++;
        if (i != (totalnewsblocks - 5)) {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '-=' + shortnewsblockHeight
            }, 600);
        } else {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '-=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.next").animate({
                'opacity': '0.3'
            }, 300);
            $(".stamp.long a.next").css({ "text-decoration": "none", "cursor": "default" });
            $(".stamp.long a.prev").animate({
                'opacity': '1'
            }, 300);
            $(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });

        }
        return false;
    });
}

function goUp() {
    $(".stamp.long a.prev").click(function () {
        i--;
        if (i != 0) {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '+=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.next").animate({
                'opacity': '1'
            }, 300);
            $(".stamp.long a.next").css({ "text-decoration": "underline", "cursor": "pointer" });

        } else {
            $("#shortnewsblocks > #inner").stop().animate({
                'marginTop': '+=' + shortnewsblockHeight
            }, 600);
            $(".stamp.long a.prev").animate({
                'opacity': '0.3'
            }, 300);
            $(".stamp.long a.prev").css({ "text-decoration": "none", "cursor": "default" });


        }
        return false;
    });
}

如果我在上一个/下一个按钮上点击太快，高度会被扰乱，我的轮播会丢失其“块式”动画。
如果轮播用完了要滚动的元素，我的按钮会淡出（并且光标变为默认值，因此最终用户不会尝试点击它）。但是我需要让它们完全禁用，因为现在最终用户仍然可以点击它，搞砸旋转木马。

干杯！

JSFiddle：http://jsfiddle.net/REVDc/1/

Answer 1

从动画中移除stop或在动画播放时移除点击事件。
使用pointer-events: none禁用点击。更多信息here。

手工制作的旋转木马

1 个答案: