乐代码:
$j(document).bind('click', function() {
$j("#test").css({ bottom:0px })
});
查看检查器,即使元素位于页面顶部,它仍然说它的底部值为 0。
也许我需要以某种方式反向播放动画?或播放不同的动画?(使用底部百分比,而不是顶部百分比)
乐代码:
$j(document).bind('click', function() {
$j("#test").css({ bottom:0px })
});
查看检查器,即使元素位于页面顶部,它仍然说它的底部值为 0。
也许我需要以某种方式反向播放动画?或播放不同的动画?(使用底部百分比,而不是顶部百分比)
正如您所想的那样,您可以制作第二个关键帧块将其重置回底部:
@-webkit-keyframes reset_to_bottom {
0%, 100% {
top: auto;
bottom: 0;
z-index: 1000000;
opacity: 0.5;
}
}
然后让您的 jQuery 更改动画名称:
$j("#test").css({
'-webkit-animation-name': 'reset_to_bottom'
});
使用-webkit-animation-fill-mode: forwards;
forwards 时将保持最后的关键帧样式,所以top:0%
仍然设置,这就是为什么bottom:0
没有效果
为了好玩...在动画的每次点击之间切换
$j(document).bind('click', function() {
if ($j("#test").css('-webkit-animation-name') == "slide_to_top") {
$j("#test").css({'-webkit-animation-name': 'reset_to_bottom'});
} else {
$j("#test").css({'-webkit-animation-name': 'slide_to_top'});
}
});
如果我正确理解情况,我认为这些修改应该可以解决您的问题:
CSS:
#test {
...
//bottom: 0px; //Remove this line
top:100%; //Replace with this
...
}
JavaScript:
//$j("#test").css({ bottom:0px })
$j("#test").css({ top:0 })
附带说明一下,我更喜欢使用 jQueryanimate()
函数而不是 CSS 来制作动画,主要是因为它已经支持所有主流浏览器。这样,我就不必担心为不同的浏览器包含多种 CSS 样式。