Jquery一次只创建一个框

Question

我试图在不同的位置创建各种盒子（只有一次），但我无法做到这一点，这就是jsFiddle：http://jsfiddle.net/3Y7g3/11/

$(function () {
    $(window).scroll(function () {

        var popWidth = "44%";
        var popHeight = "30%";


        function pop(popID) {
         $('#'+popID).fadeIn().css({'width':String(popWidth),'height':String(popHeight)
                })
        };

        function block(box, top, left, color) {
            var $btn = $('<div data-role="box"></div>');
            $("#container").children().append($btn);
            $($btn).css("background-color", color).animate({top: top,left: left});
        };

        var range = $(this).scrollLeft();

        if (range > 500 && range < 600) {

            pop('popup1')
            $('#popup2').fadeOut(function () {
                $('#popup2').hide();
            });

            block('box1', '84%', '10%', '#f04');

        } else if (range > 1500 && range < 1600) {

            pop('popup2');
            $('#popup1').fadeOut(function () {
                $('#popup1').hide();
            });

            block('box2', '84%', '10%', 'yellow');
        };
    });
});

Answer 1

编辑：我看到的代码与发布的代码无关，但与无关的jsFiddle相关...

您应该尝试$('.popup_block').not('#' + popID).finish().hide();：

$(function () {
    $(window).scroll(function () {

        var popWidth = "44%";
        var popHeight = "30%";
        var popID;
        var range = $(this).scrollLeft();
        switch (range) {
            case (500):
                popID = 'popup1';
                break;
            case (1000):
                popID = 'popup2';
                break;
        }
        $('.popup_block').not('#' + popID).finish().hide(); //<< call here
        $('#' + popID).fadeIn().css({
            'width': String(popWidth),
            'height': String(popHeight)
        }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    });
});

Answer 2

改变你切换到这样的东西：

switch (true) {
    case (range > 480 && range < 520):
        popID = 'popup1';
        break;

    case (range > 980 && range < 1020):
        popID = 'popup2';
        break;
}

if (popID) {
    $('.popup_block').hide();
    $('#' + popID).fadeIn().css({
        width: popWidth,
        height: popHeight
    })
    .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
}

基本上，您可以在此处将scrollLeft与值范围进行比较，以确保在快速滚动时永不跳过500或1000事件。您也可以使用if-else-if语句而不是切换。

您还需要使用$('.popup_block').hide();隐藏以前的块。

演示：http://jsfiddle.net/3Y7g3/8/