Question

我正在尝试添加像悬停时出现的滑动或动画页脚区域。现在我有类似的东西：

JS：

 $(document).ready(function(){  
alert("testing");
$('#bar').hover(function() {
  $(this).toggleClass('hidden');
});
});

HTML：

<div id= "bar" class="visable">
    </div>

CSS：

.hidden{
height:3em;
background-color: yellow;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition:all 1s;
}
.visable{
height: 1em;
background-color: yellow;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition:all 1s;
}

然而，这不符合预期。目的是基本上重新创建类似：http://www.flvs.net/Pages/default.aspx

的内容

Answer 1

虽然我还没有检查过代码，但是toggleClass可能就是你链接到的那个例子。 toggleClass不允许动画，但解决方法是使用css进行转换：

transition:all 1s;

然后是js：

$('#bar').hover(function() {
  $(this).toggleClass('moo');
});

由于没有单独的按钮，如果光标没有悬停在触发器上，则没有机会来回跳跃。

所有在一起：http://jsfiddle.net/cuz99vtj/1/

你必须设计风格以获得你想要的外观，但这应该给你一个想法。

Answer 2

这可能是您正在寻找的：

jsFiddle Demo

<强> HTML：

<div id="wrap"></div>
<div id="footer"></div>

<强>的javascript / jQuery的：

$('#footer').hover(
    function() {
        $(this).stop(true,true).animate({
            bottom: '0px'
        },500)
    },
    function() {
        $(this).stop(true,true).animate({
            bottom: '-50px'
        },500)
    }
);

<强>的CSS：

#wrap{width:95%;height:2000px;background:wheat;}
#footer{position:absolute;width:95%;height:60px;bottom:-50px;background:yellow;}

包装是不必要的 - 它只代表您的网页。

页脚内容是必要的。请注意，页脚元素的样式为position:absolute，可将其从流中移除，并允许您将其放置在屏幕上的任何位置。

事实上，fixed是更好的选择 - 尝试改变它。

absolute将div与文档相关联，或者以position:xxxxxxx样式（相对，绝对或固定）定位第一个父元素。 Fixed将元素相对于浏览器窗口定位。

我们将stop()与animate()一起使用以防止导入动画，其中元素会针对每个悬停操作继续弹跳一次。

使用js / jquery动画滑动页脚栏

2 个答案: