swipe in panel into view

Question

I'm trying to develop a swipe in panel that swipes into view, over the body, as the user swipes right across the body.

Here is what I have so far ( code below ): http://jsfiddle.net/XrruK/1/

$("html, body").swipe({
    swipeRight:function(event, direction, distance, duration, fingerCount){
        $('#panel').css('right', 100 - distance / $(window).width()+'%');
    }
});

However, I'm encountering two issues with this:

1. The panel, #panel, barley comes into view. And when I lessen the 100 to 50 or less, it comes in too quickly and doesn't feel proportional to the swipe distance.

2. The styling happens after the swipe is done. How can I style the panel, #panel, as the swipe is happening?

I would greatly appreciate any and all help getting this #panel to come into view as the body is being swiped to the right

Answer 1

Try it out with, I think this is what you aim for:

(100 - ((distance / $(window).width()))*100)

I've just played with the formula a bit to make it more "proportional" to the distance a user swipes:

Where the first 100 is the 100% of screen width. Then you get the distance over entire width to get a decimal representation of the distance swiped in relation to the screen width let say 0.63 and you multiply that with 100 to get make it into percentage. Then just subtract the two and what you are left is how much your right distance will be in percentage. The trick is just to reverse the percentages in order to get distance from right instead of distance from left.