圖形動畫（）向上/向下滑動

Question

我有一個DIV標記，它是懸停（）觸發器。但是，我無法更改此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() {})​