如何在一個可滾動的div中放置同位素項並保留jquery懸停狀態效果？

Question

我想實現三個特點：

含

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); 
}); 

謝謝。

Answer 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(); 

});