<div class="wrap">
<div class="block visible">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>.block {
display: none;
}
.block.visible {
display: block;
}function toggler(selector, delay) {
let elems = $(selector),
length = elems.length-1,
i = 0;
function toggleTo(index) {
elems.removeClass('visible');
$(elems[index]).addClass('visible');
}
setInterval(function(){
toggleTo(i === length ? i = 0 : ++i)
}, delay);
}
toggler('.block', 1000);<div style="width: 600px; height: 300px;">
<canvas id="myChart" style="width: 100%; height: 100%;"></canvas>
<div id="legend"></div>
</div>var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: "My Second dataset",
fill: false,
backgroundColor: "green",
borderColor: "green",
data: [60, 159, 40, 53, 53, 65, 40],
}
]
};
var myChart = new Chart('myChart', {
type: 'line',
data: data,
options: {
legend: {
display: false
},
}
});
$('#legend').html(myChart.generateLegend())
$("#legend").on('click', "li", function(){
var i = $(this).index()
myChart.data.datasets[i].hidden = !myChart.data.datasets[i].hidden;
myChart.update();
}).content {
justify-content: center;
}.circ {
margin-left: auto;
margin-right: auto;
}function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
if (getCookie('CityId') == 781) {
// do stuff
}function changeColor(index) {
return function(e) {
e.target.style.backgroundColor = "black";
console.log('index: ', index);
}
}
function qs(selector) {
return document.querySelectorAll(selector);
}
qs('.block').forEach(function(el, i) {
el.addEventListener('click', changeColor(i), false);
});
qs('.boxer').forEach(function(el, i) {
el.addEventListener('click', changeColor(i), false);
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.0.3/mediaelementplayer.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<video width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.0.3/mediaelementplayer.min.js"></script>
<script>
$('video').mediaelementplayer();
</script>
</body>
</html>#header { background: url(img/furniture.jpg); }
или
body { background: url(img/furniture.jpg); }undenfined потому что вы отсылаете 204 код204 No Content — сервер успешно обработал запрос, но в ответе были переданы только заголовки без тела сообщения © wikipedia
res.status(204).send(newTask.id);res.send(newTask.id);
p {
visibility: hidden;
opacity: 0;
transition: visibility ease 0s, opacity ease 1s;
}
li:hover p {
visibility: visible;
opacity: 1;
}
<ul class="Reviews col-md-12">
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
<li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
</ul>.Reviews {
counter-reset: a;
}
.rev {
display: flex;
height: 50px;
counter-increment: a;
margin-bottom: 10px;
}
.rev:before {
content: counter(a);
display: block;
flex-basis: 50px;
background-color: #fff;
border: 1px solid currentColor;
display: flex;
justify-content: center;
align-items: center;
color: #0af;
}
.rev span {
background-color: #ccc;
height: 100%;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0 30px;
}
.rev a {
background: #009cff;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
padding: 0 15px;
}background-position. И это еще «Full-stack» спрашивает. CSS transtion и animation вам в руки. Если так необходим jQuery, то можно заюзать встроеную функцию .animate():$('element').animate({
'backgroundPositionY': '100px',
'backgroundPositionX': '10%',
}, 1000);