Форум

joundlevel · #1 (**permalink**) 13.06.2013, 23:43

Здравствуйте,помогите,пожа луйста, как сделать выделение текста как на этом сайте http://www.alternativ.be/ ?Чтобы при наведении курсора на текст он "крутился" сверху вниз и менял цвет.Если можно,написаль код для этого,спрашивает новичок.
Заранее огромное спасибо!!!

рони · #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>

devote · #3 (**permalink**) 14.06.2013, 15:38

рони,
глючит твой скрипт, при быстром перемещении мыши по пунктам, они просто пропадают... Сижу на Опере

рони · #4 (**permalink**) 14.06.2013, 16:05

devote,
хотел сократить код но вышло боком ... поправил ... посмотрите как сейчас.

Deff · #5 (**permalink**) 14.06.2013, 16:17

Сообщение от devote

при быстром перемещении мыши по пунктам, они просто пропадают... Сижу на Опере

Странно - у меня под XP в Опере норма
Хотя можно чисто на css решить
засунув пару ccылок в block c overflow:hidden;

devote · #6 (**permalink**) 14.06.2013, 16:53

Сообщение от рони

посмотрите как сейчас

сейчас все ок

bes · #7 (**permalink**) 14.06.2013, 20:34

joundlevel, начинай отсюда

devote · #8 (**permalink**) 14.06.2013, 22:01

в нормальных браузерах это можно сделать без скриптов:

<style>
    .cache {
        height: 20px;
        overflow-y: hidden;
        float: left;
        margin: 0 10px;
    }
    .cache:hover a:first-child {
        margin-top: -19px;
    }
    .cache a {
        color: green;
        display: block;
        margin-top: 0px;
        -webkit-transition: margin-top 0.2s ease;
        -ms-transition: margin-top 0.2s ease;
        -o-transition: margin-top 0.2s ease;
        transition: margin-top 0.2s ease;
    }
    .cache a:last-child {
        color: red;
    }
</style>
<div class="box">
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
</div>

Kvark · #9 (**permalink**) 17.06.2013, 13:03

Jasmine - spam bot?

joundlevel · #10 (**permalink**) 28.06.2013, 17:16

Ребят,а что нужно поменять в коде,чтобы текст уходил не вверх,а в бок(лево).
Буду очень признателен!

<style>
.cache {
height: 20px;
overflow-y: hidden;
float: left;
margin: 0 10px;
}
.cache:hover a:first-child {
margin-top: -19px;
}
.cache a {
color: green;
display: block;
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease;
-ms-transition: margin-top 0.2s ease;
-o-transition: margin-top 0.2s ease;
transition: margin-top 0.2s ease;
}
.cache a:last-child {
color: red;
}
</style>
<div class="box">
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
</div>

Форум

Справочник

Discord чат

Курсы javascript