$("#id").hover()
Здравствуйте!
$("#logo").hover(
function () {
alert(2);
},
function(){
alert(2);
}
);
Есть такая хорошая конструкция и не хочет работать, даже ошибок не пишет. А почему??? |
А вот весь код:
$("#logo").hover(
function () {
alert(2);
},
function(){
alert(2);
}
);
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/jquery-1.10.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/us.js" charset="utf-8"></script>
<title></title>
<style>
body{
margin: 0;
background-color: black;
}
#container{
margin: 0 auto;
height: 1382px;
min-width: 1024px;
max-width: 2000px;
background: url(../img/home.jpg) 50% 0 no-repeat;
}
#block{
width: 1024px;
height: 100%;
margin: 0 auto;
}
#head{
position: relative;
padding-top: 34px;
padding-left: 147px;
}
#logo{
width: 243px;
height: 136px;
background: url(../img/ab_logo_and_menu.jpg) no-repeat;
top: 34px;
left: 147px;
position: absolute;
height: 136px;
clip: rect(1px, 243px, 136px, 1px);
}
</style>
</head>
<body>
<div id="container">
<div id="block">
<div id="head">
<div id="logo"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
|
niko42,
а есть ли $("#logo") на странице когда этот код начинает работать? может подождать
$(document).ready(function(){
$("#logo").hover(
function () {
alert(2);
},
function(){
alert(2);
}
);
});
|
Ну понятно что для начало нужно подождать, чтоб загрузиалась страница.
Немного усложним ситацию:
$(document).ready(
function(){
$("#logo").hover(
function () {
$(this).fadeOut();
},
function () {
$(this).fadeIn();
}
);
}
);
Навожу мышку в пределах области width: 200px; heigth: 300px; и перемещаю в этой области мышкой. Почему каждый раз, когда я перемещаю мышкой в заданной области не выходя за область событий, данное событие работает до тех пор как бы по циклу пока перемащяю мышку |
niko42,
откройте для себя .mouseenter() mouseleave() stop() и поиск по форуму |
Ясно, спасибо. Теперь вопрос в другом, как остановить анимацию ? И чтоб потом работало=))
$(document).ready(
function(){
$("#logo").mouseenter(
function (){
$(this).css({"background-color" : "aqua"}).fadeOut(1000);
setTimeout(function(){$("#logo").stop();}, 1000);
}
);
$("#logo").mouseleave(
function (){
$(this).css({"background-color" : "white"}).fadeIn(1000);
}
);
}
);
Что-то не катит(( |
$(document).ready(function(){
$("#logo").mouseenter(function (){
$(this).stop().css({"background-color" : "aqua"}).fadeOut(1000);
}).mouseleave(function (){
$(this).stop().css({"background-color" : "white"}).fadeIn(1000);
});
});
|
Цитата:
Суть такова, что при повторном наведение мышки на блок #logo событие mouseenter и mouseleave не срабатывает |
Понятное дело - лого скрыли - события увода курсора - не произойдёт
Нужно обрамлять в div c фиксацией размера
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wrp").mouseenter(function (){
$("#logo").stop(true,true).css({"background-color" : "green"}).fadeOut(1000);
}).mouseleave(function(){
$("#logo").stop(true,true).css({"background-color" : ":blue"}).fadeIn(1000);
});
});
</script>
<div class=wrp style="height:67px;border:red solid 1px">
<div id="logo" style="padding:20px;background-color:blue;font:700 22px/normal Tahoma;">LOGO</div>
</div>
|
Ясно, спасибо.
Сделал чуть красивее и эффектнее=)
$('#logo').mouseenter(function(){$(this).stop().animate({'opacity':1}, 600);}).mouseleave(function(){$(this).stop().animate({opacity:0}, 600);}).css({opacity:0});
|
| Часовой пояс GMT +3, время: 01:09. |