Применение Fading эффекта к каждой ссылке сайта
Добрый день!Второй день бьюсь,над одной проблемой((( подскажите пожалуйста, как ПРАВИЛЬНЕЙ реализовать следующее:
при наведении на ссылки,в меню, к ним применялся определенный стиль с эффектом Fading() . 1.например, что бы при наведении на ссылку она заворачивалась в html теги. пример. меню до наведения:
.hover_link_menu_1 {
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;
}
</div>
<div class="user_menu">
<ul style=" float:right" id="menu_header">
<li>
<a href="#">РЕГИСТРАЦИЯ</a>
</li>
<li>
<a href="#">ВХОД</a>
</li>
</ul>
</div>
после(навели на "РЕГИСТРАЦИЯ" ):
<div class="user_menu">
<ul style=" float:right" id="menu_header">
<li>
<div class="hover_link_menu_1">
<div class="hover_link_menu_2">
<div class="hover_link_menu_3">
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">ВХОД</a>
</li>
</ul>
</div>
По идее здесь нужно воспользоваться функцией:
$(this).wrap("<div id='' />");
но как обернуть ссылку в 3 дива ? 2.Ну и главный вопрос, как применить Fading() к ссылке с добавленными дивами? наверно,проще будет применить display none к диву с классом hover_link_menu_1 и следом Fading() ? примерно так:
$(document).ready(function() {
$(".float a").hover(
function(){ //over
$(this).wrap("<div id='' />"); (как-то обварачиваем 3мя дивами)
$(".hover_link_menu_1").css("display","none"); (тушим главный див "предок")
$('.hover_link_menu_1').fadeIn(); (появление кнопки со стилями)
},
function(){ //out
$('.hover_link_menu_1').fadeOut();
$(this).wrap(" "); (убираем дивы);
}
);
});
|
По-моему не очень хорошая идея по hover добавлять html элементы, а потом их удалять.
|
по-моему, лучшей идеей будет применение fading к ссылкам посредством transitions (погуглите, что это. это изменение какого-либо CSS за указанное время. используется в CSS)
... и дальнейшее допиливание этого эффекта для браузеров, которые этот эффект не поддерживают. Но никак не изменение HTML так часто! |
Согласен, изменение html по hover вариант не ОЧ.
можно при открытии страницы обворачивать каждую ссылку в 3 divа без css :
<div >
<div >
<div >
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
но потом по hover как-то определять index "ПРЕДКА" div, и к нему прикручивать стиль. так вот, как вытащить index предка дива? ну и все тот же вопрос как обернуть в 3 дива $(this).wrap("что тут писать"); ? |
Цитата:
|
Цитата:
|
Ну все же, как вытащить Index предка дива? и потом по индексу задать ему стиль,как?:help:
|
какого предка дива ? относительно чего предок ?
насчёт второго вопроса - найти все подобные div , по индексу найти необходимый и присвоить ему стили. |
Цитата:
<div >
<div >
<div >
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
при наведении на них мне нужно узнать index дива в который она(ссылка на которую навели) вложена! и потом по индексу применить опред стиль ! таким образом я смогу выцепить все 3 дива и привязывать к ним стили) |
$(this).parents('div').parents('div').parents('div);
|
Цитата:
? |
Цитата:
вот
$(document).ready(function() {
$(".float a").wrap('<div />');
$(".float a").wrap('<div />');
$(".float a").wrap('<div />');
$(".float a").hover(
function(){ //over
var index = $(this).parent('div');
alert(+index);
},
function(){ //out
}
);
});
по идее мне, в окне, должен выскочить индекс моего дива(див в который вложена наведенная ссылка )!!!а мне выскакивает NaN (( что не так ? |
Цитата:
|
как получить index diva ???????????????
$(document).ready(function() {
02
$(".float a").wrap('<div />');
03
$(".float a").wrap('<div />');
04
$(".float a").wrap('<div />');
05
$(".float a").hover(
06
function(){ //over
07
var index = $(this).parent('div').parent('div').parent('div');
08
alert(+index);
09
},
10
function(){ //out
11
12
}
13
);
14
});
так не получается (((((((((((( |
Цитата:
|
Цитата:
так вот, именно этот уникальный номер я и хочу получить, далее по нему управлять! |
sosed2,
может ты про .sourceIndex имеешь ввиду??
var index = $(this).parent('div')[0].sourceIndex;
|
но тебе нужно делать так:
$(this).parent('div').addClass('hover_link_menu_3').parent('div').addClass('hover_link_menu_2').parent('div').addClass('hover_link_menu_1');
|
ну а когда мышь убираешь, то так:
$(this).parent('div').removeClass('hover_link_menu_3').parent('div').removeClass('hover_link_menu_2').parent('div').removeClass('hover_link_menu_1');
|
а вообще лучше делать так:
<style type="text/css">
.hover_link_menu_1 {
border: 1px solid #f00;
}
.hover_link_menu_1 div {
border: 1px solid #0f0;
}
.hover_link_menu_1 div div {
border: 1px solid #00f;
}
</style>
<div>
<div>
<div>
<a class="mylink" href="/">my link</a>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".mylink").hover(function(){
$(this).parent().parent().parent().addClass('hover_link_menu_1');
}, function(){
$(this).parent().parent().parent().removeClass('hover_link_menu_1');
})
</script>
|
удобнее вместо parent().parent().parent() использовать parents()
<style type="text/css">
.hover_link_menu_1 {
border: 1px solid #f00;
}
.hover_link_menu_1 div {
border: 1px solid #0f0;
}
.hover_link_menu_1 div div {
border: 1px solid #00f;
}
</style>
<div>
<div>
<div>
<a class="mylink" href="/">my link</a>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".mylink").hover(function(){
$(this).parents(':eq(2)').addClass('hover_link_menu_1');
}, function(){
$(this).parents(':eq(2)').removeClass('hover_link_menu_1');
})
</script>
|
Огромное всем спасибо,с вопросом выборки дива разобрался но я опять застрял с одной проблемой!
после применения fadeIn() к диву дописывается style="display: block":
13
<div class="" style="display: block">
14
<div>
15
<div>
16
<a class="mylink" href="/">my link</a>
17
</div>
18
</div>
19
</div>
как убрать стиль?? он перекрывает мой класс добавленный с помощью addClass('hover_link_menu_1') ((((((((((( |
.removeAttr('style');
|
не одно так другое!у меня снова косяк(
меню при наведении на которое происходит изменение стилей с эффектом 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 ссылки?и как? |
var p = $(this).parents(':eq(2)');
p.css({width: p.width() + "px", height: p.height() + "px"}).hide().fadeIn();
|
| Часовой пояс GMT +3, время: 15:10. |