Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не работает hover() после добавление элемента в DOM (https://javascript.ru/forum/jquery/28979-ne-rabotaet-hover-posle-dobavlenie-ehlementa-v-dom.html)

jeysmook 09.06.2012 16:41
Не работает hover() после добавление элемента в DOM
 
Вставляю ссылку с помощью prepend(), после чего с этой ссылкой не могу ничего сделать! Помогите пожалуйста.
$(function(){
       $('body').prepend('<a href="" class="link">Главная</a>');
})
$(function(){
       $('.link').hover(function(){
              $(this).stop().animate({opacity:'1'},'slow');
       },function(){
              $(this).stop().animate({opacity:'1'},'slow');
       });
});

vadim5june 09.06.2012 17:18 
$(function(){
$('body').prepend('<a 
href="" class="link">Главная</a>');
$('.link').hover(function()
{$(this).stop().animate
({opacity:'0'},'slow');
});
})

Deff 09.06.2012 17:27 
$(function(){
       $('body').prepend('<a href="" class="link">Главная</a>');

       $('.link').live('hover', function() {
              $(this).stop().animate({opacity:'1'},'slow');
       },function(){
              $(this).stop().animate({opacity:'1'},'slow');
       });
});

jeysmook 09.06.2012 22:12
Deff,
Я понял ,а альтернативы нет этому методу, он не очень подходит?
Мне нужно чтобы элементу сразу opacity:'0.4', а не когда на него наводишь, как это сделать ?

Deff 09.06.2012 22:23
Цитата:
Сообщение от jeysmook
Мне нужно чтобы элементу сразу opacity:'0.4',
Ну присвойте класс - данному классу в css opacity:0.4

Или запустите в тексте страницы, позже самого элемента скрипт, устанавливающий данный атрибут

jeysmook 09.06.2012 22:28
Deff,
та дело в том, что не все браузеры могут воспринимать opacity - css.
и поэтому хотелось бы jquery...

devote 09.06.2012 22:39
Цитата:
Сообщение от jeysmook
та дело в том, что не все браузеры могут воспринимать opacity - css.
почему не все?
div {
    opacity: 0.4; /* все браузеры кроме ИЕ ниже девятой */
    filter: Alpha(opacity=40); /* для ИЕ ниже девятой */
}
или 
div {
    opacity: 0.4; /* все браузеры кроме ИЕ ниже девятой */
    filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=0.4); /* для ИЕ ниже девятой */
}

jeysmook 09.06.2012 22:41
devote,
Спасибо )))
Если кто может знает как на jQuery , то напишите плз

Deff 10.06.2012 02:42 
<html>
<body>
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<script type="text/javascript" >
$(function(){
       $('body').append('<a href="" class="link">Главная</a>');

       $('a.link').css({"opacity":"0.4"})

       $('a.link').hover(function() {
              $(this).stop().animate({opacity:1.0},800);
       },function(){
              $(this).stop().animate({opacity:0.4},800);
       });
});
</script>
</body>
</html>

jeysmook 10.06.2012 12:24
Deff,
Спасибо)
а если так то не работает... Не пойму почему?
$(function(){
		$('.go').click(function(){
			$('body').append('<a href="" class="link">Главная</a>');
			return false;
		});		   
		   $('a.link').css({"opacity":"0.4"});
		   $('a.link').hover(function(){
				  $(this).stop().animate({opacity:1.0},800);
		   },function(){
				  $(this).stop().animate({opacity:0.4},800);
		   });
	});

Deff 10.06.2012 12:41
jeysmook,
Суть в том что обработчик нужно ставить либо
а) При наличии элемента на странице (click
b) Либо вариантами live bind и one (Последнии два, нун ставить после .append элемент
http://jquery-docs.ru/Events/live/#typefn

jeysmook 10.06.2012 13:39
Deff,
Понятно, спасибо за объяснения )

Deff 10.06.2012 14:02
Цитата:
Сообщение от jeysmook
а если так то не работает... Не пойму почему?
Установка обработчика работает ранее появления элемента на странице, он ни к чему не привязывается;
Можно попробовать так, если внедрение элемента единственное,(если нет - нун ставить обработчик через .live

function Hover(){
     		   $('a.link').css({"opacity":"0.4"});
		   $('a.link').hover(function(){
				  $(this).stop().animate({opacity:1.0},800);
		   },function(){
				  $(this).stop().animate({opacity:0.4},800);
	   });
  }
	var FirstClick=true;
		$('.go').click(function(){
			$('body').append('<a href="" class="link">Главная</a>');

		if(FirstClick){FirstClick=false;Hover()} //Ставим Обработчик

			return false;
		});		   

});

Deff 10.06.2012 14:03
Ксать эффект полностью реализуется в css, -Стоит ли мучать скрипты ?

jeysmook 10.06.2012 14:13
Deff,
Так эффект замедленный )
а я так подошел к решению вопроса, нормально будет или нет ?
$(function(){
		$('.go').click(function(){
			$('body').after('<a href="" class="link">Главная</a>');
			return false;
		});
		$('body').live('mousemove', function(){
			$('a.link').animate({opacity:'0.4'},0);
			$('a.link').hover(function(){
				$(this).stop().animate({opacity:1.0},800);
			},function(){
				$(this).stop().animate({opacity:0.4},800);
			});
		});
	});

Deff 10.06.2012 14:31 
<style>
a.link{
   opacity: 1.0; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=100); /* для ИЕ ниже девятой */
   transition-duration: 0.69s;
  -webkit-transition-duration: 0.69s;
  -moz-transition-duration: 0.69s;
  -o-transition-duration: 0.69s;
  -ms-transition-duration: 0.69s; /* IE9+ */
}
a.link:hover {
   opacity: 0.4; /* все браузеры кроме ИЕ ниже девятой */
   filter: Alpha(opacity=40); /* для ИЕ ниже девятой */
}
</style>

<a href="" class="link">Главная</a>

jeysmook 10.06.2012 14:36
Deff,
Прикольно, не знал что с ccs так можно , спасибо)

Deff 10.06.2012 15:02
чуть поправил css (убрал лишние атрибуты


Часовой пояс GMT +3, время: 15:02.