[英]JQuery ready function problems
我正在使用dropShadow插件,并且JQuery ready
函数存在问题。
当我有这样的代码时:
$(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>
我不知道是否需要查看,但是下拉菜单只是一个列表,但是我希望能够将其应用于静态图像,直到下拉菜单出来后才可以使用。
dropshadow插件似乎是为固定页面元素设计的。 从dropshadow js文件中:
“此jQuery插件在页面元素后面添加了柔和的阴影。它仅用于向大多数固定对象(例如页面标题,照片或内容容器)添加一些阴影”
编辑:也许您可以用CSS达到想要的效果? http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
问题出在CSS内,当第一次调用dropShadow()时,类dropShadow的css设置为hiddent(放置在此处是为了使动态片段在IE中起作用(没有它,所有其他浏览器都可以)。您可以通过调用$('。dropShadow')。css('visibility','visible');看到此内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.