Cursor JQuery

by Anton Kolesnikov

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="parent">
    <div id="cursor">
    </div>
</div>
<div id="res">123</div>
<div id="text">Тут текст</div>

CSS

#parent {
    width: 250px;
    background: blue;
}
#cursor {
    width: 60px;
    height: 60px;
    background: red;
}

JavaScript

$(document).ready(function(){
    $("#cursor").draggable({
        axis: 'x',
        containment: 'parent',
        drag: function(event, ui) {
            $("#res").text(ui.position.left);
            $("#text").css("opacity", (ui.position.left + 10) / 190 );

        }
    });
});