jquery - 悬停时扩展的社交网络侧边栏框

Question

已经尝试了一段时间以使其正常工作，并感谢您的帮助。

我想要制作的是社交网络侧边栏框，它会在悬停时从屏幕边缘滑出，我只是不知道该怎么做。

我正在尝试做的示例：http: //journal.digital-atelier.com/1/

Answer 1

这是一个例子----> FIDDLE

这是另一个滑出两个示例 -----> FIDDLER 2 SLIDE

将项目设置为固定、脱离屏幕和脱离屏幕。然后，您只需为某个事件制作动画。要么mouseenter或click

上面的小提琴链接只是一些示例代码。按照 Fiddle 链接查看更多

$('body').on('mouseenter','#social-hover',function(){
    $('#social-hover').animate({
        left: '150px'
    },250);
    $('#social-main').animate({
        left: '0px'
    },250);
});



$('body').on('mouseleave','#container',function(){
    $('#social-hover').animate({
        left: '0px'
    },250);
    $('#social-main').animate({
        left: '-150px'
    },250);
});