Множественные свойства CSS на jQuery, animation, button

5 (100%) 1 vote[s]

Рассмотрим, как при помощи jQuery добавить множественные свойства CSS элементу страницы, в чем разница между элементами <button></button> и <input type=»button»/>. Также применим это для создания анимации.

Button

Начнем с кнопок. По функционалу разницы между тегом <button> и <input type=»button»> нет никакой. Важно, что всегда нужно указывать атрибут типа для <button> (button, submit, reset), поскольку по умолчанию в разных браузерах добавляются разные значения (для тега <button> атрибут типа по умолчанию чаще submit, кроме IE — там type=button).

По этой причине в формах лучше использовать <input type=»button»>. Это уже стало правилом для большинства.

А вот в плане стилизации разница большая. Самая главная — это возможность вставлять любой контент (текст, фото) между тегами <button></button>. Надпись на кнопке, сделанной при помощи input, является содержимым атрибута value (если его не указать, получим пустую кнопку). Использовать псевдоэлементы СSS :before, :after с content:»» или content:»url(«img url») к input не получится, поскольку они не работают с пустыми элементами. Этот трюк можно сделать с использованием <label> к <input>, и к нему уже применить CSS псевдоэлемента.

Вот два элемента <button> и <input>, внешне выглядят одинаково, но HTML CSS разные:

Мы постарались реализовать все преимущества тега button применительно к input, используя label. Вот код:

  1. <style>
  2. /*СТИЛИ ДЛЯ BUTTON*/
  3. .butn {
  4.   display:block;
  5.   width:220px;
  6.   padding: 16px 32px;
  7.   margin: 4px 2px;
  8.   font-size: 16px;  
  9.   transition-duration: 0.4s;
  10.   cursor: pointer;
  11.   outline: 0 !important;   
  12.   background: url("fon.jpg")center/cover,rgba(125, 40, 40,0.5); 
  13.   color: black; 
  14.   border: 1px solid #7d2828;
  15.   border-radius:3px;  
  16.   box-shadow: 0 0 3px rgba(0,0,0,0.4);
  17. }
  18. .butn:hover {
  19.   background-color: rgba(125, 40, 40,1);
  20.   color: white;  
  21. }
  22. .butn:active {
  23.   background-color: #73c7a0;
  24.   color: white;
  25.   border-color: #73c7a0;
  26.   box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  27. }
  28. /*СТИЛИ ДЛЯ INPUT*/
  29. input {
  30.  padding-left:120px;
  31.  text-align: right;
  32.  height: 90px;
  33. }
  34. .butn img {
  35.   width:80px;
  36. }
  37. .label {
  38.   position: relative;
  39. }
  40. .label:before {
  41.   position:absolute;
  42.   top:10px;
  43.   left:35px; 
  44.   background-image: url('image.png');
  45.     background-size: 75px 60px;
  46.     display: inline-block;
  47.     width: 75px; 
  48.     height: 60px;
  49.     content:"";
  50.   z-index:999;
  51. }
  52. </style>
  53. <button type="button" class="butn reset"><img src="image.png">Button</button>
  54. <label class="label" for="input">
  55. <input type="button" class="butn input" id="input" name="input" value="Input">
  56. </label>

Понятно, что стилизовать input можно, но нерентабельно. Тем более, в DOM появляется дополнительный элемент, что добавляет неудобств при получении доступа к инпуту (и уж тем более, если их множество).

Из этого видно, что при помощи тега <button> можно быстро сделать кнопку с какими-нибудь потрясающими эффектами. Она будет как самостоятельный элемент дизайна. А если кнопка больше носит функциональное значение — тогда берем input.

Множественные свойства и селекторы CSS в jQuery

Чтобы добавить CSS стили к элементу на странице при помощи jQuery применяется метод .css(). Этот метод работает с объектом свойств элемента, представляющий собой набор пар свойство-значение. Например, если нужно изменить/добавить свойство height:

$('#elementID').css('height','200px');

Теперь посмотрим, как можно сделать множественный выбор, сделать выбор по сложному пути, и как добавить несколько свойств CSS.

Выбор нескольких элементов (по ID, className, tagName) для применения к ним одинакового стиля:

$('#elementID, .elementClassName, input[type="button"], ul li:nth-child(odd)').css('opacity',0.7);

В примере выше мы уже увидели, что нужно просто перечислить идентификаторы элементов через запятую. В нем же можно увидеть, как получить элемент по сложному пути. Вот например, нужно получить конкретный img, не имеющий идентификатора:

$('#elementID .ClassName p:nth-child(odd) img').css('opacity',0.7);

Теперь наборы стилей. Если нужно добавить/убрать 2-3 свойства, можно использовать такой тип записи:

$('#elementID').css('opacity',0.7).css('color','red');

Но поскольку мы имеем дело с объектом, содержащим пары свойств и значения стилей элемента, можно создавать предварительно наборы стилей (объекты) и применять их в нужные моменты или при определенных условиях. Множественные свойства стилей jQuery:

var cssValues1 = {
    "color": "red",
    "width": "200px",
    "background-image":"url('image1.gif')"
}
var cssValues2 = {
    "color": "green",
    "width": "250px",
    "background-image":"url('image2.gif')"
}
var cssValues3 = {
    "color": "blue",
    "width": "300px",
    "background-image":"url('image3.gif')"
}
if(условие){
  $('#ID').css(cssValues1);
}else if(условие){
  $('#ID').css(cssValues2);
}else{
  $('#ID').css(cssValues3);
}

Анимация

Сделаем разметку из 4-х картинок и 2-х кнопок для управления анимацией:

<div class="foto-group">
 
<div role="complementary" id="quiz">
 <div class="sideBlock unSung">
  <strong>Rotate CSS animation</strong>
   <p><img src="1img1.jpg" alt="Midnight Run"></p>
   <p><img src="1img2.jpg" alt="Wyatt Earp"></p>
 </div>
</div>
 
<div role="complementary" id="quiz">
 <div class="sideBlock overHyped"> 
   <p><img src="1img3.jpg" alt="Moulin Rouge"></p>
   <p><img src="1img4.jpg" alt="King Kong"></p>
 </div>
</div>
 
</div>
<div id="flex-group">
 
<button type="button" class="buttn animate"><img src="lol.png">Animate</button>
<button type="button" class="buttn reset"><img src="lol.png">Reset</button>
</div>

Вначале создадим промежуточные шаги @keyframe и назовем его swing:

@keyframes swing {
from {
transform: rotate(3deg);
}
20% {
transform: rotate(7deg);
}
60% {
transform: rotate(10deg);
}
80% {
transform: rotate(7deg);
}
to {
transform: rotate(3deg);
}
}

Затем добавим  в js объекты со свойствами/значениями animation:

var cssValues1 = {
    "transform": "rotate(3deg)",
    "animation": "swing 0.3s 5 ease-in"
}
var cssValues2 = {
    "transform": "rotate(-3deg)",
    "animation": "swing 0.3s 5 0.3s ease-in"
}
var cssValues3 = {
    "transform": "rotate(3deg)",
    "animation": "swing 0.3s 5 0.2s ease-in"
}
var cssValues4 = {
    "transform": "rotate(-3deg)",
    "animation": "swing 0.3s 5 0.5s ease-in"
}
var cssValues5 = {
    "transform": "",
    "animation": ""
}

И напишем управление стилями при помощи кнопок:

$('body').on('click','.animate',function(){
 $('#quiz .unSung p:nth-child(odd) img').css(cssValues1);
 $('#quiz .unSung p:nth-child(even) img').css(cssValues2);
 $('#quiz .overHyped p:nth-child(odd) img').css(cssValues3);
 $('#quiz .overHyped p:nth-child(even) img').css(cssValues4);
 
})
$('body').on('click','.reset',function(){
 $('#quiz .unSung p:nth-child(odd) img').css(cssValues5);
 $('#quiz .unSung p:nth-child(even) img').css(cssValues5);
 $('#quiz .overHyped p:nth-child(odd) img').css(cssValues5);
 $('#quiz .overHyped p:nth-child(even) img').css(cssValues5);
})

Останется добавить стили для кнопок, которые мы рассмотрели в начале статьи.

Этот пример сам по себе не имеет особой ценности, но показывает быстрый способ применения анимации. А здесь уже открывается широкое поле для реализации самых причудливых идей.

Animation...CSS3...

CSS3 Animation!

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 141

Популярные записи