JQuery就緒函數問題

我正在使用dropShadow插件，並且我遇到了JQuery ready函數的問題。JQuery就緒函數問題

當我有這樣的代碼：

$(document).ready(function() { 
    $('div#shadow').dropShadow(); 
    $('#navigation li.mainmenu').bind('mouseover', navigation_open); 
    $('#navigation li').bind('mouseout', navigation_timer); 
});

它只會讓陰影一旦下拉菜單已經出來了，這是第二個功能。任何想法爲什麼？

的JS完整的代碼是：

$(document).ready(
function() 
{ 
    $('#navigation li.mainmenu').bind('mouseover', navigation_open); 
    $('#navigation li').bind('mouseout', navigation_timer); 
    }); 
var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 
var highlightmenu = 0; 
var returncolor = 0; 
var textreturncolor = 0; 
var height = 0; 
var originaltop = 0; 
var resettop = 0; 
var top = 0; 
var shadowExists = 0; 
var dropshadow = 0; 
function drawShadow(){ 
//draw the shadow only on mouse enter 
dropshadow = $(this).find('ul').dropShadow({top: 4, opacity: 1}); 
$('.dropShadow').css('visibility','visible'); 
} 
function navigation_open() 
{ navigation_canceltimer(); 
    navigation_close(); 
    height = $(this).height(); 
ddmenuitem = $(this).find('ul'); 
//Double Liners are above 40 pixels 
menu = ddmenuitem.find('li'); 
/*===Need to get the top pos. of the item and adjust it since it is absolute;  relative does not work*/ 
top = ddmenuitem.position().top; 
resettop = top; 
    if (height > 40){ 
    top = top - 53; 
    } 
    else{ 
    top = top - 35; 
    } 
ddmenuitem.css('top', top.toString() + "px"); 
//---ADD A DROP SHADOW...USING JQUERY PLUGIN 
ddmenuitem.dropShadow({top: 4, opacity: 1}); 
$('.dropShadow').css('visibility','visible'); 
ddmenuitem.css('visibility', 'visible'); 
returncolor = $(this).find('a#highlight').css('background-color'); 
textreturncolor = $(this).find('a#highlight').css('color'); 
highlightmenu = $(this).find('a#highlight').css('background-color','#6487ad'); 
highlightmenu.css('color','#ffffff'); 
highlightmenu.css('font-weight','bold');} 

function navigation_close() 
{ if(ddmenuitem){ 
ddmenuitem.css('visibility', 'hidden'); 
ddmenuitem.css('top',resettop); 
ddmenuitem.removeShadow(); 
} 
if(highlightmenu){ highlightmenu.css('background-color',returncolor); 
        highlightmenu.css('color',textreturncolor); 
        } 
} 

function navigation_timer() 
{ 
    closetimer = window.setTimeout(navigation_close, timeout);} 

function navigation_canceltimer() 
{ if(closetimer) 
    { 
    window.clearTimeout(closetimer); 
     closetimer = null;}} 

document.onclick = navigation_close;

的HTML會是這樣的靜：

<div id="shadow"> 
//images here 
</div>

我不知道，如果你需要看到了，但是降菜單只是一個列表，但我希望能夠將其應用於靜態圖像，直到拖放菜單出現爲止。

來源

2011-06-15 Travis

你可以提供一個HTML代碼片段來幫助給上下文嗎？ – NullRef 2011-06-15 20:40:35

也許你可以提供一些演示代碼？ – roberkules 2011-06-15 20:40:45

我已經在我的問題上更新了它謝謝 – Travis 2011-06-15 21:55:33

問題在於CSS內部，當第一次調用dropShadow（）時，類的dropShadow被設置爲hiddent（這是放置在那裏使動態塊在IE中工作的（所有其他瀏覽器都沒有它）。在javascript中你可以看到這個由$（'。dropShadow'）.css（'visibility'，'visible'）;被調用。

來源

2011-06-16 13:23:26 Travis

dropshadow插件似乎是專爲固定頁面元素設計的。來自dropshadow js文件：

「這個jQuery插件在頁面元素後面添加了柔和的陰影，它僅用於爲幾乎靜止的對象添加一些陰影，如頁面標題，照片或內容容器「

編輯：也許你可以達到你正在尋找與CSS的效果？ http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

來源

2011-06-15 21:11:56 mutex

它適用於下拉式菜單，而不是靜態圖像，當下拉式菜單出現時它會加載圖像的陰影與dropmenu無關，我不知道爲什麼，謝謝你你的幫助，我已經嘗試了CSS路由，現在CSS 3並沒有得到很大程度的支持，特別是那種效果，我可能會使用gimp來添加它以將效果添加到我想要的圖像中。我只是想，如果有可能通過Jquery來完成，它會使網站更新變得更容易。 – Travis 2011-06-15 21:24:03

好的。上面的鏈接涵蓋了IE 5.5以及最近的（雖然不是流血的）populer瀏覽器版本，所以它不是純粹的css3。但是，如果你真的想要去jQuery的路線，你可能想提供一個簡單的小提琴來顯示問題（http://jsfiddle.net），我們可能會幫助更多。 – mutex 2011-06-15 21:44:45

JQuery就緒函數問題

回答

相關問題