Question

我有一个功能，我在-250px处更改div的背景位置26次。我的功能有效，但我确信它以最糟糕的方式完成，希望能够简化它。

$(this).delay( 25 ).queue(function (next) {
    $(this).css('background-position', '-250px top');
    next();
});

我很好奇是否有办法改变这一点，这样我就不会重复相同的四行26次，每个块只有-250px的差异，直到达到-6500px。

非常感谢任何见解。谢谢。

编辑：每个depperm的请求，完整的功能：这是完整的功能。可以有X个项目，每个项目都有不同的背景图像，并且每个项目使用相同的功能。

$('.the-item').mouseenter(function(){
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-1000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-1250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-1500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-1750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-2000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-2250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-2500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-2750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-3000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-3250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-3500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-3750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-4000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-4250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-4500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-4750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-5000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-5250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-5500px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-5750px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-6000px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-6250px top');
        next();
    });
    $(this).delay( 25 ).queue(function (next) {
        $(this).css('background-position', '-6500px top');
        next();
    });
});

Answer 1

如果您不想重复4行代码26次，那么您可以使用setTimeout并调用包含4行代码的函数。

例如，像这样：

<!DOCTYPE html>
<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            var backPos = 0;
            function changeBackgroundPos(myDivId) {
                backPos -= 250;
                if (backPos > -6500) {
                    $('#'+myDivId).css('background-position', backPos.toString()+'px top');
                    $('#'+myDivId).html($('#'+myDivId).css('background-position'));
                    setTimeout(function(){
                        changeBackgroundPos(myDivId);
                    },1000);
                }
            }   
            changeBackgroundPos('myDiv');
        });
        </script>
    </head>
    <body>
        <div id="myDiv" style="width:100px;height:100px;border:1px solid #333;"></div>
    </body>
</html>

简化重复Jquery函数

1 个答案: