One of the most interesting features of the mobile world is the incredible ability given to the user of sliding contents just with a single finger movement. This is a really useful enhancement, because it frees you from being forced to rely on some buttons or controls to make the sliding effect run. Is it possible to achieve a similar effect with jQuery on a traditional, PC-based environment? Yes, but with a major difference: on a traditional environment, the majority of screen events are bound to mouse movements, so we're going to use these ones with the aid of the animate() method. The following is our first test:
$(document).ready(function() {
$('#container').mousemove(function(e) {
var leftX = e.pageX;
$('#slide').animate({left: leftX}, 100);
});
});
The pageX property of the Event object stores the current value of the mouse's position along the x-axis (horizontal). By adding this value to the CSS left property used with animate(), we rearrange the position of the target element every time the mouse is moved by the user.
This is only the first test. If you've tested something similar or, more important, a better solution than this, please let me know.