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;添加到.twitterblock，只是为了让它看起来像一个按钮

干杯

-G。

定义Javascript滑块命中/翻转区域

1 个答案: