There is a variable, you need to increase its value by 40 and go back to the original, read, search, delve into, while it is difficult, fail to answer your question. At the bottom, I prepared a code, if it works, the block should move vertically:

var h = document.documentElement.clientHeight, w = document.documentElement.clientWidth, wb = parseInt($('.block').css('height')), peremennaya = (h - wb) / 2; //- та переменная, значение которой должно колебаться в пределах 40px //$(".block").css('top', peremennaya); $(".block").css('left', (w - wb) / 2); 
 .block { display: block; position: fixed; width: 50px; height: 50px; background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="block"></div>

    1 answer 1

    did not quite understand the ideas, but maybe so:

     var w = document.documentElement.clientWidth, wb = parseInt($('.block').css('height')), tick = 0; var timer = setInterval(function() { if (tick++ >= 80) tick = 0; $(".block").css('left', (w - wb) / 2 + Math.abs(tick - 40)); }, 10) 
     .block { display: block; position: fixed; width: 50px; height: 50px; background: #ccc; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="block"></div>

    so that less twitching at the edges, you can use, for example, the sine function:

     var timer = setInterval(function() { tick++; $(".block").css('left', (w - wb) / 2 + Math.sin(tick/100*Math.PI)*40); }, 10)
    • Only your average is taken from clientWidth and css ('height'), between width and height. I did not change it. - Nikola Tesla
    • although it is embarrassing what is not done with the help of animation effects done, here and not ask them. unless again mathematically, it is very much twitching. - Yevgeny Shevtsov
    • @ YevgenyShevtsov, you decide - animation effects, or the variable changes - Grundy
    • @Grundy smoothly changing the number from one to another using animation effects simply this number will fall into the variable and not be displayed in its pure form on the page, that is, so that you can set the change of the number, different effects, increasing fading linear, etc. In the question described in detail. - Yevgeny Shevtsov
    • @ YevgenyShevtsov, nea, it's not clear at all :) the number is the number, if you change it yourself, then the effects are all the same, if you want animation, use animation - in this case your variable is not clear where it should be attached - Grundy