var newWidth, mouth = $("#mouth"); $( "#slider" ).slider({ slide: function(event, ui) { if (ui.value > 51 ) { mouth.css({ bottom: 0, top: "auto" }); newWidth = 160 - ui.value; mouth.css({ width : newWidth, height : newWidth, "border-radius" : newWidth / 2, left : -25 + ((ui.value-50) / 2) }) .removeClass("straight"); } else if ((ui.value > 48) && (ui.value < 52)) { mouth.addClass("straight"); } else { mouth.css({ top: 0, bottom: "auto" }); newWidth = ui.value + 60; mouth.css({ width : newWidth, height : newWidth, "border-radius" : newWidth / 2, left : -ui.value / 2 }) .removeClass("straight"); } }, value: 50 });
<div id="slider"></div> <div id="face"> <div id="mouth-box"> <div id="mouth" class="straight"></div> </div> </div>
#face { width: 100px; height: 100px; position: relative; border: 2px solid black; border-radius: 50px; margin: 20px auto; } #face:before, #face:after { position: absolute; content: ""; width: 10px; height: 10px; top: 30px; border-radius: 10px; background: black; } #face:before { left: 30px; } #face:after { left: 60px; } #mouth-box { width: 60px; height: 20px; left: 20px; top: 60px; overflow: hidden; background: white; position: relative; } #mouth { width: 60px; height: 60px; border-radius: 30px; border: 2px solid black; position: absolute; top: 0; left: 0; } #mouth.straight { height: 0px !important; top: 7px !important; border-width: 1px; bottom: auto !important; }