2

我有一个 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(){})
4

1 回答 1

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() {})​
于 2013-01-01T19:43:29.070 回答