Проблемы с готовыми функциями JQuery - PullRequest
Новая
       28

Проблемы с готовыми функциями JQuery

1 голос
/ 16 июня 2011

Я использую плагин 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>

Я не знаю, нужно ли вам больше видеть, однако выпадающее меню - это просто список, но я хочу иметь возможность применить это к статическим изображениям, и это не произойдет, пока не появятся выпадающие меню.

Ответы [ 2 ]

1 голос
/ 16 июня 2011

Плагин drophadow, похоже, предназначен для стационарных элементов страницы.Из js-файла drophadow:

"Этот плагин jQuery добавляет мягкие тени за элементы страницы. Он предназначен только для добавления нескольких теней в основном к стационарным объектам, таким как заголовок страницы, фотография илиКонтейнеры содержимого "

РЕДАКТИРОВАТЬ: Возможно, вы могли бы достичь эффекта, который вы ищете с помощью CSS?http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

0 голосов
/ 16 июня 2011

Проблема заключается в CSS, когда при вызове dropShadow () в первый раз для css для класса dropShadow устанавливается значение hiddent (это было сделано для того, чтобы динамические части работали в IE (все остальные браузеры без него работают нормально). В javascript вы можете увидеть это по $ ('. DropShadow'). Css ('видимость', 'видимый'); вызывается.

...