Question

我有一个DIV标签，它是hover（）触发器。但是，我不能改变这个div的设置，css等。

在这种情况下，如果我想要一个动画效果，请从此触发器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() {})

弄图Animate（）向上/向下滑动

1 个答案: