Javascript-форум - Показать сообщение отдельно

рони · #2 (**permalink**) 14.06.2013, 02:46

joundlevel,

<!DOCTYPE HTML>
<html>
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <style type="text/css">
            .box {
                position:absolute;
                left:25%;
                top:40px;
                display:block;
                height:50px;
                background:#696969
            }
            .cache {
                float:left;
                display:block;
                position:relative;
                width:150px;
                height:20px;
                overflow:hidden;
                margin-top:15px
            }
            a {
                color:#FFF;
                text-transform:uppercase;
                font-size:14px;
                font-weight:bolder;
                margin-left:17px;
                position:absolute;
                top:0px;
                left:0px
            }
            a.on {
                color:#F30;
                position:absolute;
                top:20px;
                left:0px
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
        </div>
        <script type="text/javascript">
             $(".cache").hover(function (event) {
                $(this).children().stop(true, true);
                $(this).children().eq(0).animate({
                    top: "-20px"
                }, 200)
                $(this).children().eq(1).animate({
                    top: "0px"
                }, 200)

            }, function (event) {
               $(this).children().stop(true, true);
                $(this).children().eq(0).animate({
                    top: "0px"
                }, 200)
                $(this).children().eq(1).animate({
                    top: "20px"
                }, 200)
            })        
</script>
    </body>
</html>