繰り返しJquery関数

私はdivのバックグラウンド位置を-250pxで変更しています。私の仕事は機能していますが、最悪の形でやり遂げられたと確信しており、簡単にすることを望みます。繰り返しJquery関数

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

私はそれが-6500pxに達するまで、各チャンクはちょうど-250px差を有すると同じ4行26回繰り返していないよように、これを変更する方法がある場合、私は興味がありました。

何か洞察力があれば幸いです。ありがとうございました。

編集：deppermさんのリクエストに応じて、完全な機能：完全な機能は次のとおりです。それぞれ異なる背景イメージを持つX個のアイテムがあり、それぞれに同じ機能を使用しています。あなたは、コードのあなたの4行26回を繰り返したくない場合は

$('.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

、あなたはの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

答えて

関連する問題