javascript - 计算 Animate() 向上/向下滑动

Question

我有一个 DIV 标记，它是 hover() 触发器。但是，我无法更改此 div 的设置、cs​​s 等。

在这种情况下，如果我想有一个动画效果，从这个触发div标签的底部向下滑动。我该怎么做？

我尝试在触发器 Div 的顶部创建一个 Div 绝对区域，但没有成功。请帮助和建议。

HTML

<div id="trigger" style="width:100px; height:100px; border:#000 solid 1px;"></div> //This is the trigger div
<div id="target" style="width:100px; height:100px; background-color:#000; position:absolute;"></div> // This is the thing I gonna slide down

JS

$('#trigger').hover(function(){
    target = $('#target');
    trigger = $('#trigger');


  ///create a area can hide Target before slide down
    target.wrapAll('<div style="border:#000 solid 1px; position: absolute; top: '+ trigger.offset().top + trigger.height() +'; left:" '+ trigger.offset().left  +'; width: '+trigger.width() +'; height: '+ trigger.height()  +'; ">')  
     .css({ top: -target.height(), left: 0  })
     .animate({top: 0 });

      }, function(){})

Answer 1

这是您要找的吗？ (我已经向触发器 div 添加了三个属性，一个相对位置和一个 z-index，它强制它位于黑框的顶部。然后我给 div 一个背景颜色，这样它就可以遮住黑框。)

我忍不住认为有一种更简洁的方法可以做到这一点。

http://jsfiddle.net/bUcZg/

代码:

HTML

<div id="trigger" style="width:100px; height:100px; background-color:#FFF; position:relative; z-index:1; border:#000 solid 1px;position:relative;"></div> 
<div id="target" style="width:100px; height:100px; background-color:#000; position:absolute;"></div>

JavaScript

target = $('#target');
trigger = $('#trigger');


///create a area can hide Target before slide down
target.wrap('<div style="border:#000 solid 1px; position: absolute; top: ' +     trigger.offset().top + trigger.height() + '; left:" ' + trigger.offset().left + '; width: ' + trigger.width() + '; height: ' + trigger.height() + '; ">').css({
top: -target.height(),
left: 0
})

trigger.hover(function() {
    target.animate({
        top: 0
    });

}, function() {})​