动画高度从底部到顶部而不是从顶部到底部
如何反向实现高度动画？
而不是典型的动画从顶部开始并向下工作，我怎样才能让它从元素的底部开始动画并向上朝向元素的顶部？
该事件由a#link-1触发，动画发生在div#line-1 。
这是我的代码：它似乎不起作用。 ： – /
HTML
CSS
#pageContainer{ position: relative; margin: 0px 0px 200px 0px; min-height: 748px; height: 748px; background: url('../img/sprite.png') bottom center no-repeat; } a#link-1{ position: absolute; top: 686px; left: 36px; text-align: center; display: block; width: 76px; height: 24px; line-height: 24px; z-index: 20; } div#line-1{ position: absolute; top: 4px; left: 30px; width: 340px; height: 687px; background: url('../img/sprite.png') 0px 0px no-repeat; }
JS
// Initially hide $("div#line-1").hide(); // Activate Line 1 $('a#link-1').click(function() { $('div#line-1').animate({ opacity: 0.25, height: 'toggle' }, 5000, function() { // Animation complete. }); });
你div和你的标签有相同的ID。 他们必须拥有唯一的ID。
$('a#line-1').click(function() { $('div#line-1').animate({
需要是这样的：
$('a#line-1').click(function() { $('div#unique_id').animate({
示例修复
position: absolute; bottom: 0px;
动画底部+ 1。
您还可以使用top或margin-top负值向上移动。
像从上到下一样动画，但添加element.scrollTop = 99999;
这将确保内容的底部可见（除非出于某种原因，它的高度为100,000像素）并且效果将是从底部到顶部的动画。