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就绪函数问题

回答

相关问题