не одно так другое!у меня снова косяк(
меню при наведении на которое происходит изменение стилей с эффектом FadeIn() я реализовал, но не все так гладко (
.hover_link_menu_1 {
display:none;
color:#FFF;
border-width:0px;
background-image:url(../img/2.jpg);
background-repeat:repeat-x;
}
.hover_link_menu_2 {
border-width:0px;
background-image: url(../img/1.jpg);
background-repeat: no-repeat;
padding-left:5px;
}
.hover_link_menu_3 {
border-width:0px;
background-image:url(../img/3.jpg);
background-repeat: no-repeat;
background-position:right;
padding-right:5px;
padding-bottom:4px;
padding-top:2px;
}
$(document).ready(function() {
$(".color_menu a").wrap('<div />');
$(".color_menu a").wrap('<div />');
$(".color_menu a").wrap('<div />');
$(".color_menu a").hover(
function(){ //over
// var index = $(this).parent('div').parent('div').parent('div');
// alert(+index);
$(this).parents(':eq(2)').addClass('hover_link_menu_1');
$(this).parents(':eq(1)').addClass('hover_link_menu_2');
$(this).parents(':eq(0)').addClass('hover_link_menu_3');
$(this).parents(':eq(2)').fadeIn();
//$(this).parents(':eq(2)').removeAttr('style');
},
function(){ //out
$(this).parents(':eq(2)').removeClass('hover_link_menu_1').removeAttr('style');
$(this).parents(':eq(1)').removeClass('hover_link_menu_2');
$(this).parents(':eq(0)').removeClass('hover_link_menu_3');
}
);
});
дело в том что,что бы происходил эффект fadein мне необходимо сначала применить к родителю "див" стиль display:none, а уж потом применять fadein,вот тут собака и зарыта!!!!Так как у меня меню построена на основе списков, то при применении стиля display:none меню начинает скакать "дрожать" и если повезет срабатывает, запланированный, fadein ((( посоветуйте, как быть?
у меня есть решение,но я не знаю как его реализовать и не уверен возможно ли так сделать.Если обернуть все это(три дива и ссылка) еще в один див и применить к нему стиль с фиксированной шириной и высотой текста ссылки,то мы избавимся от этого глюка! так вот,реально ли узнать width и height ссылки?и как? |