<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>.menu {
transform: translateX(-100%);
opacity: 0;
transition: all 0.5s ease;
}
.menu.ready {
transform: translateX(0);
opacity: 1;
}const delay = 300;
[...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
setTimeout(() => {
menu.classList.add('ready');
}, delay * (index + 1))
});document.querySelectorAll('.element').forEach(el => {
const id = el.getAttribute('id');
fetch('https://mysite.com', {
body: {
id
}
})
.then(response => response.json())
.then(response => {
if (response.status === 'ok') {
el.style.color = 'green';
} else {
el.style.color = 'red';
}
})
.catch(err => {
console.log(err);
el.style.color = 'red';
});
});$id = $_GET['id'];
// Что-то делаем
$result = doSomething($id);
$response = [
'status' => $result ? 'ok' : 'error'
];
echo json_encode($response);
die;я понимаю, что как в примере я не перебью стили,
jQuery.ajax({ // 1. Выполнится этот код
url: 'receiveData.php',
type: 'POST',
data: {},
success: function () {
// 3. А уже после окончания запроса выполнится этот код
// Именно в это время данные будут получены и сохранены.
},
error: function () {
console.log('ERROR');
}
})
receiveTxt(); // 2. Потом сразу же выполнится этот кодformData.append('file', $('input[name="file"]')[0].files[0]);
formData.append('listing_id', listing);
+formData.append('action', 'send_message_into_chat');
-var data = {
- action: 'send_message_into_chat',
- form_data: formData
-};
$.ajax({
url: ajaxurl,
type: 'POST',
- data: data,
+ data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (r) {
console.log(r);
},
});& в CSS Nesting работает иначе, чем мы привыкли в препроцессорах.& представляет собой сам родительский селектор.
.menu {
right: -100%;
}
@media(max-width: 768px) {
/* Открывать меню только при ширине, меньшей 768 */
.menu.open {
right: 0;
}
}const m = matchMedia('(min-width: 768px)');
function watch(e) {
if (e.matches) { // Сработает, когда ширина превысит 768px
document.querySelector('.menu').classList.remove('open');
}
}
m.addListener(watch);
watch(m);window.dropdown = function(event) {
}{{ assets('pictures/dog.jfif') }}{{ url('pictures/dog.jfif') }}PROJECT_DIR/public/pictures/dog.jfif<img src="/pictures/dog.jfif" alt="dog">
const input = '@id1 / @id2 / @id3 ';
const idsArr = input
.trim()
.split('/')
.map(s => s.trim().replace('@', ''));
const idsString = idsArr.join(',');.f2{
position: absolute;
right: 0;
top: 0;
animation: blink2 6s linear infinite;
}
@media screen and (max-width: 1200px) {
.f2 {
display: none; /* скрыть блок полностью */
animation: none; /* или только убрать анимацию */
}
}if ($product->get_price() == 0 ) {
return '<a href="">'.__( 'Запросить цену' ).'</a>';
}.slide-visible { transform: scale(0.5); } // первый видимый слайд
.slide-visible + .slide-visible { transform: scale(0.75); } // второй
.slide-visible ~ .slide-active { transform: scale(1); } // активный, в центре
.slide-active + .slide { transform: scale(0.75); } // следующий за активным
.slide-active + .slide + .slide { transform: scale(0.5); } // последний видимый
// немного плавности
.slide { transition: transform 1s ease; }