Переписал код с ES5 на ES6
evt.currentTarget
и this
- это объект, на котором висит listenerevt.target
- куда на самом деле кликнулиРекурсивно пробежалсяЗачем рекурсивно, есть же
.closest('.wrapper')
function toggleClass(selector, className, delay) {
let index = -1;
return setInterval($items => {
$items.eq(index).removeClass(className);
index = (index + 1) % $items.length;
$items.eq(index).addClass(className);
}, delay, $(selector));
}
const intervalId = toggleClass('.wrap div', 'active', 300);
function toggleClass(selector, className, delay) {
const items = document.querySelectorAll(selector);
let index = ~-items.length;
return items.length
? setInterval(() => {
items[index].classList.remove(className);
index = -~index % items.length;
items[index].classList.add(className);
}, delay)
: null;
}
<div class="block">
<img class="image">
</div>
.block {
position: relative;
overflow: visible;
}
.block .image {
position: absolute;
top: -100px;
right: 200px;
}
<div class="block">
<img class="image">
</div>
.block {
overflow: visible;
}
.block .image {
display: inline-block;
margin-top: -100px;
margin-bottom: -100px;
}
.block .image {
position: absolute;
width: 300px;
top: -100px;
right: 200px;
}
@media (max-width: 800px) {
.block .image {
width: 200px;
top: -50px;
right: 50px;
}
}
foo.onmouseover = function(){
this.classList.toggle('rotate')
}
CSS:img {
transition: transform 1s ease;
}
.rotate {
transform: rotate(45deg);
}