Форум

niko42 · #1 (**permalink**) 24.06.2013, 17:07

Здравствуйте!

$("#logo").hover(

            function () {

                alert(2);
                
            },

            function(){

                alert(2);

            }

        );

Есть такая хорошая конструкция и не хочет работать, даже ошибок не пишет. А почему???

niko42 · #2 (**permalink**) 24.06.2013, 17:10

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

$("#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

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

$(document).ready(function(){
$("#logo").hover(

            function () {

                alert(2);

            },

            function(){

                alert(2);

            }

        );
});

niko42 · #4 (**permalink**) 24.06.2013, 17:34

Ну понятно что для начало нужно подождать, чтоб загрузиалась страница.
Немного усложним ситацию:

$(document).ready(
    function(){
        $("#logo").hover(

            function () {

                $(this).fadeOut();

            },

            function () {

                $(this).fadeIn();

            }

        );

    }

);

Навожу мышку в пределах области width: 200px; heigth: 300px; и перемещаю в этой области мышкой.
Почему каждый раз, когда я перемещаю мышкой в заданной области не выходя за область событий, данное событие работает до тех пор как бы по циклу пока перемащяю мышку

рони · #5 (**permalink**) 24.06.2013, 17:56

niko42,
откройте для себя .mouseenter() mouseleave() stop() и поиск по форуму

niko42 · #6 (**permalink**) 24.06.2013, 20:05

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

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

            }

        );

    }

);

Что-то не катит((

Deff · #7 (**permalink**) 24.06.2013, 20:35

$(document).ready(function(){

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

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

        }).mouseleave(function (){

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

        });
});

niko42 · #8 (**permalink**) 24.06.2013, 20:47

Сообщение от 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 не срабатывает

Deff · #9 (**permalink**) 24.06.2013, 21:05

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

niko42 · #10 (**permalink**) 24.06.2013, 21:34

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

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

$('#logo').mouseenter(function(){$(this).stop().animate({'opacity':1}, 600);}).mouseleave(function(){$(this).stop().animate({opacity:0}, 600);}).css({opacity:0});

Форум

Справочник

Discord чат

Курсы javascript