在悬停时扩展的社交网络边栏框

Question

尝试了一段时间才能让它发挥作用，并感激任何帮助。

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

我要做的事情示例：http://journal.digital-atelier.com/1/

Answer 1

这是一个例子----＆gt; FIDDLE

这是两个滑出的另一个例子-----＆gt; FIDDLER 2 SLIDE

将项目设置为固定，部分关闭屏幕，并在屏幕上显示部分。然后你就可以在某个事件上制作动画。 mouseenter或click

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

$('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);
});