Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавное изменение CSS-свойства при нажатии на ссылку (https://javascript.ru/forum/jquery/62040-plavnoe-izmenenie-css-svojjstva-pri-nazhatii-na-ssylku.html)

caboke 22.03.2016 00:28
Плавное изменение 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:50
Вот так выглядит сам DIV.

Dilettante_Pro 22.03.2016 16:23
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>

caboke 22.03.2016 17:26
Dilettante_Pro, большое спасибо. А что нужно сделать, чтобы кнопка "Выполнить" появилась?

Dilettante_Pro 22.03.2016 18:57
caboke,
Цитата:
Сообщение от caboke
А что нужно сделать, чтобы кнопка "Выполнить" появилась?
Имеете в виду кнопку Посмотреть?
Нужно собрать код в один модуль, в т.ч. с подгрузкой требуемых скриптов, заключить в теги HTML и в головном теге добавить run
(можете сделать цитату по моему посту и посмотреть, если что непонятно)

caboke 22.03.2016 19:41
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>

destus 22.03.2016 20:15
caboke,
а зачем вообще это? 
$('#st').removeClass('clicked');}, 3000);

если можно на css сделать? Если изменить время, придется в двух местах менять - многовато :)

caboke 22.03.2016 20:33
Цитата:
Сообщение от destus (Сообщение 411741)
caboke,
а зачем вообще это? 
$('#st').removeClass('clicked');}, 3000);

если можно на css сделать? Если изменить время, придется в двух местах менять - многовато :)
Здравствуйте. Можете предложить свой вариант и разместить его здесь (я просто в программировании полный профан).

destus 22.03.2016 20:48 
<!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>

caboke 23.03.2016 00:12
destus, а за счёт чего идёт обратная анимация от красного к синему цвету?


Часовой пояс GMT +3, время: 20:47.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице