Рисунок Animate() Слайд вверх / вниз

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-индекс, который заставляет его находиться сверху черного ящика. Затем я дал 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() {})​