Define Javascript slider hit/rollover area

Im having an issue defining the hit area for a javascript sliding element.

See example: http://www.warface.co.uk/clients/warface.co.uk/

Please slide over the grey box on the right side to reveal the button, although this works I would only like for the slider to only be triggered by rolling over the red block.

CSS

.slidingtwitter { /* -- This is the hit area -- */
    background: #ccc;
    width:255px;
    height:55px;
    overflow: hidden; 
    top:50%;
    right: 0px; /* -- This is the sliding start point -- */
    position: fixed;
    font-family: Gotham, Sans-Serif;
    z-index: 50;
    }
.slidingtwitter.right {
    right:0px;
    }
.slidingtwitter .caption { /* -- This is the sliding area -- */
    background: #fff;
    position: absolute;
    width:260px;
    height:55px;
    right: -205px; /* -- This is the sliding start point -- */
    }
.slidingtwitter a {
    color: #484848;
    font-size: 20px;
    text-transform: uppercase;
    }
.slidingtwitter a:hover {
    color: black;
    }
.slidingtwitter .smaller {
    font-size: 12px;
    font-family: Gotham Medium;
    }
.twitterblock {
    background: #f35555 url("styles/images/button_twitter.png") no-repeat 14px 15px ;
    width:35px;开发者_开发百科
    height:35px;
    padding:10px;
    float:left;
    display:block;
    }
.slidingtwitter .followme {
    background: url("styles/images/button_arrowheadthin.jpg")no-repeat right 0;
    height:35px;
    display:block;
    float:left;
    line-height:14px;
    width:140px;
    margin:10px 0px 0px 14px;
    padding-top:6px;
    padding-right: 40px;
    }

JS

    $('.slidingtwitter').hover(function(){
        $(".slide", this).stop().animate({right:'0px'},{queue:false,duration:400}); //Position on rollover
    },function() {
        $(".slide", this).stop().animate({right:'-205px'},{queue:false,duration:400}); //Position on rollout
    });

Any suggestions would be much appreciated.

I'm not sure if the gray area should be visible at all but you can check this solution:

animate the whole .slidingtwitter:

$('.slidingtwitter').hover(function(){
    $(this).stop().animate({right:'0px'},{queue:false,duration:400});
},function(){
    $(this).stop().animate({right:'-205px'},{queue:false,duration:400});
});

Change the CSS to stick the .slide{left:0;/*remove right:-205px;*/}

Set the starting point for .slidingtwitter{right:-205px;}

You can add cursor:pointer; to .twitterblock just to make it look like a button

Cheers

G.