I make such a mocap with a switch. I thought through all the logic, everything is easy. It remains only to make one small point:

enter image description here

As seen on the image, made with your own hands. Everything is very simple, there is a parent block which is limited by the macbook frame (Only the screen without frames). And there is a strip. It is centered in position: absolute; . The screenshot has left: 55%; . left: 0; - image border.

The question is how to make it so that only by clicking on the strip itself you can move its position on X, without minus positions and no more than the border (so that 0 and 100% are limited)?

  • 2
    Can your code be ? ThisMan

1 answer 1

If I understood correctly, as an option so jsfiddle

 $('.poloska').click(function() { var p = parseInt($(this).css('left')) * 100 / $('body').width(); p >= 50 ? $(this).animate({ left: '5%' }, 500) : $(this).animate({ left: '95%' }, 500); }); 
 body { background: #20262E; padding: 20px; font-family: Helvetica; } .poloska { position: absolute; top: 0; bottom: 0; left: 70%; width: 10px; background-color: #ffffff; cursor: pointer; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="poloska"></div>