Javascriptスライダのヒット/ロールオーバー領域を定義する

Question

JavaScriptのスライド要素のヒット領域を定義する際に問題が発生しました。

例を参照してください： http://www.warface.co.uk/clients/warface.co.uk/

をこれは私が唯一の唯一の赤ブロックの上に転がすことにより誘発されるスライダの希望の作品が、ボタンを明らかに右側にある灰色のボックスの上にスライドさせてください。

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 
    }); 

任意の提案をいただければ幸いです。

Answer 1

私は灰色の領域が全く表示されている必要がありますが、あなたがこのソリューションをチェックすることができるかどうかはわからない：

は全体.slidingtwitterをアニメーション：

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

変更CSS .slide{left:0;/*remove right:-205px;*/}

を固執します

開始点を設定.slidingtwitter{right:-205px;}

cursor:pointer;にを追加できますちょうどそれが

乾杯

G.

このG用