Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2013, 17:07
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

$("#id").hover()
Здравствуйте!

$("#logo").hover(

            function () {

                alert(2);
                
            },

            function(){

                alert(2);

            }

        );

Есть такая хорошая конструкция и не хочет работать, даже ошибок не пишет. А почему???
Ответить с цитированием
  #2 (permalink)  
Старый 24.06.2013, 17:10
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

А вот весь код:

$("#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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.06.2013, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

niko42,
а есть ли $("#logo") на странице когда этот код начинает работать?
может подождать
$(document).ready(function(){
$("#logo").hover(

            function () {

                alert(2);

            },

            function(){

                alert(2);

            }

        );
});
Ответить с цитированием
  #4 (permalink)  
Старый 24.06.2013, 17:34
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

Ну понятно что для начало нужно подождать, чтоб загрузиалась страница.
Немного усложним ситацию:
$(document).ready(
    function(){
        $("#logo").hover(

            function () {

                $(this).fadeOut();

            },

            function () {

                $(this).fadeIn();

            }

        );

    }

);


Навожу мышку в пределах области width: 200px; heigth: 300px; и перемещаю в этой области мышкой.
Почему каждый раз, когда я перемещаю мышкой в заданной области не выходя за область событий, данное событие работает до тех пор как бы по циклу пока перемащяю мышку
Ответить с цитированием
  #5 (permalink)  
Старый 24.06.2013, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

niko42,
откройте для себя .mouseenter() mouseleave() stop() и поиск по форуму
Ответить с цитированием
  #6 (permalink)  
Старый 24.06.2013, 20:05
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

Ясно, спасибо. Теперь вопрос в другом, как остановить анимацию ? И чтоб потом работало=))

$(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);

            }

        );

    }

);


Что-то не катит((
Ответить с цитированием
  #7 (permalink)  
Старый 24.06.2013, 20:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

$(document).ready(function(){

        $("#logo").mouseenter(function (){

                $(this).stop().css({"background-color" : "aqua"}).fadeOut(1000);

        }).mouseleave(function (){

                $(this).stop().css({"background-color" : "white"}).fadeIn(1000);

        });
});
Ответить с цитированием
  #8 (permalink)  
Старый 24.06.2013, 20:47
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

Сообщение от Deff Посмотреть сообщение
$(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 не срабатывает
Ответить с цитированием
  #9 (permalink)  
Старый 24.06.2013, 21:05
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Понятное дело - лого скрыли - события увода курсора - не произойдёт
Нужно обрамлять в 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>

Последний раз редактировалось Deff, 24.06.2013 в 21:08.
Ответить с цитированием
  #10 (permalink)  
Старый 24.06.2013, 21:34
Аспирант
Отправить личное сообщение для niko42 Посмотреть профиль Найти все сообщения от niko42
 
Регистрация: 12.07.2012
Сообщений: 81

Ясно, спасибо.

Сделал чуть красивее и эффектнее=)

$('#logo').mouseenter(function(){$(this).stop().animate({'opacity':1}, 600);}).mouseleave(function(){$(this).stop().animate({opacity:0}, 600);}).css({opacity:0});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск