22.03.2016, 00:28
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
|
Плавное изменение CSS-свойства при нажатии на ссылку
Всем доброй ночи. Подскажите, пожалуйста, как можно реализовать данную задачу средствами jQuery:
При нажатии на ссылку с классом "in" у DIV-элемента с классом "#st" плавно меняется прозрачность бордера с 0.5 до 1 и потом обратно до 0.5 ?
Ссылка с классом, на которую нажимаем, выглядит так:
<a class="in" href="123">добавить</a>
Класс DIV-элемента, который должен поменять прозрачность, выглядит так:
#st { border: 5px solid rgba(0, 143, 255, 0.5); }
Спасибо за кооперацию.
Последний раз редактировалось caboke, 22.03.2016 в 10:47.
|
|
22.03.2016, 10:50
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
Вот так выглядит сам DIV.
|
|
22.03.2016, 16:23
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
caboke,
Пример нормально работает во всех браузерах, кроме IE - в IE прозрачность меняется только в одну сторону, ничем не смог заставить работать, как все 
<!DOCTYPE html >
<html>
<head>
<title></title>
<style type="text/css">
#st { border: 5px solid rgba(0, 143, 255, 0.5);
border-radius: 20px;
position:absolute;
top:20px;
left:150px;
height :150px;
width :200px;
-webkit-transition:border 1s ease;
-moz-transition:border 1s ease;
-o-transition:border 1s ease;
transition:border 1s ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
$('.in').on('click', function () {
$("#st").css("border", "5px solid rgba(0, 143, 255, 1)");
setTimeout(function () { $("#st").css("border", "5px solid rgba(0, 143, 255, 0.5") }, 1000);
});
}
</script>
</head>
<body>
<div id="st" ></div>
<a class="in" href="#">добавить</a>
</body>
</html>
|
|
22.03.2016, 17:26
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
|
Dilettante_Pro, большое спасибо. А что нужно сделать, чтобы кнопка "Выполнить" появилась?
Последний раз редактировалось caboke, 22.03.2016 в 19:44.
Причина: Исправление
|
|
22.03.2016, 18:57
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
caboke,
|
Сообщение от caboke
|
|
А что нужно сделать, чтобы кнопка "Выполнить" появилась?
|
Имеете в виду кнопку Посмотреть?
Нужно собрать код в один модуль, в т.ч. с подгрузкой требуемых скриптов, заключить в теги HTML и в головном теге добавить run
(можете сделать цитату по моему посту и посмотреть, если что непонятно)
Последний раз редактировалось Dilettante_Pro, 22.03.2016 в 19:00.
|
|
22.03.2016, 19:41
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
Dilettante_Pro, спасибо. В общем так это выглядит в собранном виде. Единственное, что я не понял - почему-то, если тело скрипта находится выше кнопки «добавить», то скрипт не срабатывает. Не знаете, почему?
<!DOCTYPE html >
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#st {
border: 5px solid rgba(0, 143, 255, 0.5);
width: 200px;
height: 100px;
border-radius: 10px;
}
.clicked {
animation: fade-bodred 3s linear;
}
@keyframes fade-bodred {
0% {
border-color: rgba(0, 143, 255, .5);
}
50% {
border-color: rgba(255, 0, 0, 1);
}
100% {
border-color: rgba(0, 143, 255, .5);
}
}
</style>
</head>
<body>
<a class="in" href="#">добавить</a>
<div id="st"></div>
<script type="text/javascript">
$('.in').on('click', function() {
$('#st').addClass('clicked');
setTimeout(function() {
$('#st').removeClass('clicked');
}, 3000);
});
</script>
</body>
</html>
Последний раз редактировалось caboke, 22.03.2016 в 20:14.
|
|
22.03.2016, 20:15
|
 |
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
caboke,
а зачем вообще это?
$('#st').removeClass('clicked');}, 3000);
если можно на css сделать? Если изменить время, придется в двух местах менять - многовато 
|
|
22.03.2016, 20:33
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
Сообщение от destus
|
caboke,
а зачем вообще это?
$('#st').removeClass('clicked');}, 3000);
если можно на css сделать? Если изменить время, придется в двух местах менять - многовато
|
Здравствуйте. Можете предложить свой вариант и разместить его здесь (я просто в программировании полный профан). |
|
22.03.2016, 20:48
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#st {
border: 5px solid rgba(0, 143, 255, 0.5);
width: 200px;
height: 100px;
border-radius: 10px;
}
.clicked {
animation: fade-bodred 3s linear alternate;
}
@keyframes fade-bodred {
0% {
border-color: rgba(0, 143, 255, .5);
}
50% {
border-color: rgba(255, 0, 0, 1);
}
}
</style>
</head>
<body>
<a class="in" href="#">добавить</a>
<div id="st"></div>
<script type="text/javascript">
$('.in').on('click', function() {
$('#st').addClass('clicked');
});
$('#st').on('animationend', function () {
$(this).removeClass('clicked');
});
</script>
</body>
</html>
|
|
23.03.2016, 00:12
|
|
Новичок на форуме
|
|
Регистрация: 22.03.2016
Сообщений: 7
|
|
|
destus, а за счёт чего идёт обратная анимация от красного к синему цвету?
|
|
|
|
