1

私は3つの機能を実装しようとしています:

  1. 画像のサムネイルを含むスクロール可能な div
  2. jquery同位体でソートできる
  3. カーソルを合わせると、div が他の要素の上に表示され、直接のコンテナーを超えて表示されます。

現時点では、どちらか一方が発生する可能性があります。つまり、スクロールバーが表示されますが、ホバー状態の div が他の要素の背後にある、またはホバー状態の div を他の要素の前に取得できますが、スクロールバーは表示されません。

jsfiddle

http://jsfiddle.net/rwone/PUKjy/

脚本

$(".magic").hover(

function() {
//console.log($(this).find('.hidden_db_data_div').position().left);
console.log($(this).position().top);
$(this).css("z-index", "999").find('.hidden_db_data_div').css({
'left': $(this).position().left + 40 + "px" + "!important",
'top': '-50px'
}).fadeIn(500);

}, function() {
$(this).css('z-index', '').find('.hidden_db_data_div').fadeOut(100);
});

ありがとうございました。

4

1 に答える 1

1

解決済み

http://jsfiddle.net/rwone/89P9m/

コード

$(".magic").each(function() {

var hiddenDiv = $(this).find(".hidden_db_data_div"),
parentElement = $(this),
api = {};

api.isOpen = false;

api.timeout = null;

api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#wrapper").offset().top - 50,
"left": parentElement.offset().left - $("#wrapper").offset().left +20 
});
}

api.resetTimeout = function(){

clearTimeout( api.timeout );
}

api.startShowing = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.show();        
},300);
}

api.startHiding = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.hide();        
},150);
}
api.show= function(){

if(!api.isOpen){

api.position();

hiddenDiv .fadeIn(500);

api.isOpen = true;

$("#isotope_container").bind("scroll.hiddendiv",api.position);

}
}

api.hide = function(){

if( api.isOpen ) {
api.isOpen = false;
$("#isotope_container").unbind("scroll.hiddendiv");     
hiddenDiv.fadeOut(100);
}

}

hiddenDiv.bind("mouseenter", function() {

api.resetTimeout();

}).bind("mouseleave", function() {

api.startHiding();

}).css("z-index", 100).appendTo("#wrapper"); 

$(this).data("hiddenApi",api );

}).bind("mouseenter", function() {

var api = $(this).data("hiddenApi");

api.startShowing();

}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element

var api = $(this).data("hiddenApi");

api.startHiding();

});
于 2012-11-25T02:14:17.543 に答える