2

hover() トリガーである 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(){})
4

1 に答える 1

1

これはあなたが探しているものですか？（トリガーdivに3つのプロパティ、相対位置、およびブラックボックスの上に配置するように強制する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 に答える