
JavaScript
- 87 ответов
- 0 вопросов
84
Вклад в тег
.wrapper {
width: 100%;
height: 100%;
background: linear-gradient(to right, green 50%, red 50%);
}
<div class="wrapper"></div>
body,html {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
transition: background 1s;
background: none;
}
(function (w, d) {
w.onload = function () {
var wp = d.querySelector('.wrapper'),
colors = ['yellow', 'red', 'green', 'blue'],
ln = colors.length;
var changeColor = function (i) {
if (i < ln) {
setTimeout(function () {
wp.style.cssText = "background: " + colors[i] +";";
i++;
changeColor(i);
}, 2000);
} else {
changeColor(0);
}
};
changeColor(0);
};
}(window, document));
<button id="open">Открыть</button>
<div id="form">
<form action="#" method="post">
<input type="text" value="" placeholder="найти" />
</form>
</div>
#form {
padding: 20px;
background-color: #000;
display: none;
}
$(document).ready(function () {
var searchBlock = $('#form');
$(document).on('click', '#open', function () {
searchBlock.slideToggle();
return false;
});
});