Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:
RSS
ВКонтакте

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Плавный переход в Javascript

Web программирование
32K
28 января 2011 года
Clubberry
186 / / 19.01.2011
Как в Javascript сделать плавный переход?

Есть код:
 
Код:
/*deviantart*/
function mouseOver1()
{
document.getElementById("deviantart").src ="css/img/icons/deviantart_16.png";
}
function mouseOut1()
{
document.getElementById("deviantart").src ="css/img/icons/bw/deviantart_16.png";
}


При наводке курсора на иконку она резко меняется с mouseOut, на mouseOver, а как сделать, чтобы переход был плавный?

Типа как в CSS3 transiction:
Свернуть исходник 
Код:
<html>
<header>
<title>Transition</title>
<style type="text/css">
body {
    font-family: "Courier", monospace;
    font-size: 12px;
    }

a.trans {
    padding: 5px 10px;
    color: white;
    background: #9c3;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

a.trans:hover,
a.trans:focus {
    color: #030;
    background: #690;
    }
</style>
</header>
<body>
<a href="#" class="trans">Transition me!</a>
</body>
</html>
[ATTACH]4949[/ATTACH]
По порядку
Сначала полезные
Сначала решения

13 ответов

274
28 января 2011 года
Lone Wolf
1.3K / / 26.11.2006
Если без использывания фреймвороков, то
в цикле менять opacity

а фреймворки так и делают, просто там одной строчкой вызывается ))
5
29 января 2011 года
hardcase
4.5K / / 09.08.2005
JQuery UI Effect не подойдет?
32K
29 января 2011 года
Clubberry
186 / / 19.01.2011
Огромное спасибо за такой сайтик! :)
Свернуть исходник 
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Artem Korolenko + Graphic designer</title>
        <meta name="author" content="Artem Korolenko" />
        <meta name="revised" content="24/01/2011" />
        <meta name="description" content="Artem Korolenko is a web and graphic designer." />
        <meta name="keywords" content="Web design, Graphic design, GUI, Icon, Customization, HTML, CSS, XHTML, HTML5, CSS3, Web, Artem, Korolenko, Clubberry" />
<link rel="stylesheet" type="text/css" href="inc/style.css" />
<script type="text/javascript" src="inc/script.js"></script>
</head>

<body>
<!-- RANDOM -->
<script type="text/javascript">
var bgPath = 'img/bg';
var imagesNumber = 2;
var rndBg =  Math.floor(Math.random() * imagesNumber);
document.body.style.backgroundImage = 'url(' + bgPath + rndBg + '.jpg)';
</script>

<!-- CONTENT -->
<div class="floating">
I'm just another mr. &#0171;designer&#0187; from Ukraine<br />
I have a strong opinion in web and graphic design<br />
You can check my works on <a href="http://dribbble.com/Clubberry" target="_blank" class="dribbble links">dribbble</a>
    and <a href="http://clubberry.deviantart.com/" target="_blank" class="deviantart links">deviantart</a> <br />
Also follow me on <a href="http://twitter.com/#!/Clubb3rry" target="_blank" class="twitter links">twitter</a>
    or just <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" class="hello links">say hello</a><br />
</div>

<!-- SOCIAL ICONS -->  
<div class="icons">
    <a href="http://cargocollective.com/artkorolenko" target="_blank"><img class="icon" alt="Cargo" src="img/icons/bw/cargo_16.png" /></a>
        <a href="http://clubberry.deviantart.com/" target="_blank"><img class="icon" alt="deviantART" src="img/icons/bw/deviantart_16.png" id="deviantart" width="16" height="16" &#111;&#110;mouseover="mouseOver1()" &#111;&#110;mouseout="mouseOut1()" /></a>
        <a href="http://dribbble.com/Clubberry" target="_blank"><img class="icon" alt="Dribbble" src="img/icons/bw/dribbble_16.png" id="dribbble" width="16" height="16" &#111;&#110;mouseover="mouseOver2()" &#111;&#110;mouseout="mouseOut2()" /></a>
        <a href="http://www.facebook.com/iksdejkee" target="_blank"><img class="icon" alt="Facebook" src="img/icons/bw/facebook_16.png" id="facebook" width="16" height="16" &#111;&#110;mouseover="mouseOver3()" &#111;&#110;mouseout="mouseOut3()" /></a>
        <a href="http://www.flickr.com/photos/iksde/" target="_blank"><img class="icon" alt="Flickr" src="img/icons/bw/flickr_16.png" id="flickr" width="16" height="16" &#111;&#110;mouseover="mouseOver4()" &#111;&#110;mouseout="mouseOut4()" /></a>
        <a href="http://www.lastfm.ru/user/WebScUm" target="_blank"><img class="icon" alt="Last.fm" src="img/icons/bw/lastfm_16.png" id="lastfm" width="16" height="16" &#111;&#110;mouseover="mouseOver5()" &#111;&#110;mouseout="mouseOut5()" /></a>
        <a href="skype:man.hunt-"><img class="icon" alt="Skype" src="img/icons/bw/skype_16.png" id="skype" width="16" height="16" &#111;&#110;mouseover="mouseOver6()" &#111;&#110;mouseout="mouseOut6()" /></a>

        <a href="http://iksde.tumblr.com/" target="_blank"><img class="icon" alt="Tumblr" src="img/icons/bw/tumblr_16.png" id="tumblr" width="16" height="16" &#111;&#110;mouseover="mouseOver7()" &#111;&#110;mouseout="mouseOut7()" /></a>
        <a href="http://twitter.com/#!/Clubb3rry" target="_blank"><img class="icon" alt="Twitter" src="img/icons/bw/twitter_16.png" id="twitter" width="16" height="16" &#111;&#110;mouseover="mouseOver8()" &#111;&#110;mouseout="mouseOut8()" /></a>
        <a href="http://vimeo.com/clubberry" target="_blank"><img class="icon" alt="Vimeo" src="img/icons/bw/vimeo_16.png" id="vimeo" width="16" height="16" &#111;&#110;mouseover="mouseOver9()" &#111;&#110;mouseout="mouseOut9()" /></a>
        <a href="mailto:artkorolenko@russia.ru?Subject=Hello!" target="_blank"><img class="icon" alt="Email" src="img/icons/bw/email_16.png" /></a>
</div>

</body>
</html>


Свернуть исходник 
Код:
body {
    background: url(../img/bg0.jpg);
    background-position: 50% 0%;
    background-color: #E6E6E6;
    font-family: "Trebuchet MS", Georgia, Times New Roman, serif;
    font-style: italic;
    font-size: 12px;
    color: #353535;
    }

img {
    border:none;
    }

a {
    text-decoration: none;
    }

a.links {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
    }

a.dribbble {
    color: #ea4c89;
    background: #ffffff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.dribbble:hover {
    color: #ffffff;
    background: #353535;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.deviantart {
    color: #425349;
    background: #ffffff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.deviantart:hover {
    color: #ffffff;
    background: #353535;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.twitter {
    color: #46d1ff;
    background: #ffffff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.twitter:hover {
    color: #ffffff;
    background: #353535;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.hello {
    color: #000000;
    background: #ffffff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

a.hello:hover {
    color: #ffffff;
    background: #353535;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 1px;
    margin: -3px;
    }

.icon {
    opacity: 0.25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 hack */
    filter: alpha(opacity = 25); /* IE 5-7 hack */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
    }

.icon:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 hack */
    filter: alpha(opacity = 100); /* IE 5-7 hack */
    }

.floating {
    position: absolute;
    bottom: 40%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    line-height: 18pt;
    }

.icons {
    position: absolute;
    bottom: 37.5%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    }


Фон: bg0-~.jpg
244
29 января 2011 года
UAS
2.0K / / 19.07.2006
Эхх, зря Вы сразу человеку без опыта фреймворки даёте :(
32K
29 января 2011 года
Clubberry
186 / / 19.01.2011
Почему же это так плохо?
278
29 января 2011 года
Alexander92
1.1K / / 04.08.2008
Потому что прежде чем пользоваться фреймворком, нужно очень хорошо понимать принципы его работы. Иначе можно написать большую ерунду, полтора месяца искать, где ошибка, и бегать на форум по каждому чиху.
244
29 января 2011 года
UAS
2.0K / / 19.07.2006
Да тут даже дело не в "понимать принципы его работы". Человек должен сначала вообще разобраться с самим языком (в данном контексте - JS), чтобы осмыслять что, где, как и почему именно так.

Использование же фреймворка с таким опытом сравнимо со стрельбой из пушки по воробьям - все проблемы человек будет решать в рамках его и мыслить в рамках него, но понять вообще сам язык он не сможет.
Отсюда будет куча ошибок и вопросов, например:
1) как указываться ссылку на внешний объект, когда создается анонимная функция;
2) что такое события и как их использовать;
3) оптимальное использование фреймворка, где надо (где-то тут тема было, когда человек, видно без опыта, написал на JQuery ужас на 20 строк, а если бы понимал JS, то все уложилось бы в 3 строчки);
4) jQuery будет использован везде, где можно и нельзя
5) ну и узкость мышления наступает
6) и т.д.
274
29 января 2011 года
Lone Wolf
1.3K / / 26.11.2006
Во-во. поэтому я про фреймворки только вспомнил..
2ТС, та что плавно менять opacity не получилось?
5
29 января 2011 года
hardcase
4.5K / / 09.08.2005
Цитата: UAS
Да тут даже дело не в "понимать принципы его работы". Человек должен сначала вообще разобраться с самим языком (в данном контексте - JS), чтобы осмыслять что, где, как и почему именно так.

Это можно делать параллельно с изучением фреймворка, JS очень компактный язык. Браузерный АПИ не отличается дружелюбностью к программисту (луч ненависти w3c), а JS фреймворки позволяют быстро достигать целей.

8
29 января 2011 года
mfender
3.5K / / 15.06.2005
Кому хочется понять, тот и с фреймворками додумается откуда мошонка выросла, а кому только результат - тот плюнет, станет бизнесменом и заплатит деньги, чтобы ему всё сделали ))))
244
29 января 2011 года
UAS
2.0K / / 19.07.2006
[QUOTE="Hardcase"]а JS фреймворки позволяют быстро достигать целей[/QUOTE]
Позволяют, вот только ума от этого не набираются. Работать-то все будет прекрасно, но понимания нет никакого.
5
29 января 2011 года
hardcase
4.5K / / 09.08.2005
Цитата: UAS
Позволяют, вот только ума от этого не набираются. Работать-то все будет прекрасно, но понимания нет никакого.


Зависит от приоритетов человека. Если ему нужен лишь результат (как мне, например, - веб-программизм, а особенно JS, уже в печенках сидит) - то почему бы и нет? А кому нужно понимание, тот всегда достанет книжку по предмету.

32K
31 января 2011 года
Clubberry
186 / / 19.01.2011
Цитата: Lone Wolf
Во-во. поэтому я про фреймворки только вспомнил..
2ТС, та что плавно менять opacity не получилось?



Получилось более лучше чем я хотел. Я для прозрачности использовал CSS3 и Javascript.

У меня Javascript используется для mouseOut & mouseOver, а CSS3 для прозрачности. Что самое хорошее, валидатор не ругается не на CSS, не на HTML. :) Может быть это не так уж и хорошо, но всё же меня радует. :rolleyes:

Цитата: hardcase
Зависит от приоритетов человека. Если ему нужен лишь результат (как мне, например, - веб-программизм, а особенно JS, уже в печенках сидит) - то почему бы и нет? А кому нужно понимание, тот всегда достанет книжку по предмету.


Честно говоря, с javascript взаимного понимая ещё нет, но всё в процессе, потихоньку разбираюсь. Так что на данном этапе мне нужен от js всего лишь результат, а вот с css & html, уже взаимность хорошая, всё пока окей. ;)

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог