簡化重複jquery函數

我有一個函數，我在-250px更改了div的背景位置26次。我有這個功能，但我確信它是以最糟糕的方式完成的，希望能夠簡化它。簡化重複jquery函數

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

我很好奇，如果有要改變這種做法，我不跟每個塊只是有，直到它到達一個-6500px差異-250px重複相同的四條線26倍的方式。

任何洞察力，不勝感激。謝謝。

編輯：根據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(); 
    }); 
});

來源

2016-08-29 natis

你可以添加你的相關代碼的休息嗎？ – depperm

如果您需要動畫之間的持續時間，則使用'setInterval（）'。 https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval – bipen

如果你不想重複你的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>

來源

2016-08-29 19:34:23

簡化重複jquery函數

回答

相關問題