Анимация в каждой карточке страницы архива блога каменщика
У меня есть архив блога каменщика здесь: http://staging.morningsidepharm.com/news-blog/
Он находится в Wordpress и использовал плагин для создания страниц под названием Elementor.
Я пытался найти способы исчезнуть в каждой «карточке» одну за другой. Посты выглядят так:
<div class = "elementor-posts-container">
<article class = "elementor-post"></article>
<article class = "elementor-post"></article>
<article class = "elementor-post"></article>
<article class = "elementor-post"></article>
</div>
Поэтому я поставил файл .js в свою установку Wordpress, а внутри файла с именем additional.js добавил следующий код:
$(".elementor-post").each(function(i) {
$(this).delay(100 * i).fadeIn(500);
});
Я тоже пробовал это:
function fadeLI(elem, idx) {
elem.eq(idx).fadeIn(500, function() {
fadeLI(elem, (idx + 1) % elem.length);
});
}
fadeLI($(".elementor-post"), 0);
Я считаю, что мне нужно заменить $ в первом примере на jQuery, поэтому я тоже попробовал.
Я добавил следующий CSS для div:
.elementor-post {
display: none;
}
Единственное, что все это, кажется, делает, это display:none;, блоки elementor-post.
Будучи Wordpress, я действительно предполагал, что jQuery активен, я видел его в списке ресурсов в моем браузере ... поэтому я не совсем уверен, где я ошибаюсь.
Любая помощь будет принята с благодарностью.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В WordPress jQuery использует без конфликтного режима. Это означает, что вам нужно всегда использовать jQuery вместо $.
Если я попробую это с вашим первым примером, это сработает:
jQuery(".elementor-post").each(function(i) {
jQuery(this).delay(100 * i).fadeIn(500);
});
Но в моих тестах мне нужно было отключить все сообщения с помощью селектора css .elementor-posts .elementor-post.
В этом примере вы должны вызывать свою функцию только тогда, когда элементы полностью загружены. Вы можете добиться этого, поставив в очередь сценарий additional.js в нижнем колонтитуле страницы:
wp_enqueue_script('additional-js', get_template_directory_uri() . '/additional.js', array( 'jquery' ), false, true);
Или вы можете обернуть функцию внутри функции jQuery(document).ready(). Это имеет то преимущество, что вы можете передать jQuery как $ всему, что находится внутри этой функции:
jQuery(document).ready(function($){
// you can use $ here
$(".elementor-post").each(function(i) {
$(this).delay(100 * i).fadeIn(500);
});
});
Я просто попробовал немного в консоли разработчика Chrome на вашем веб-сайте. Если я посмотрю на ваш сайт, все сообщения будут видны при загрузке страницы. Если я вас правильно понял, вы хотите скрыть все сообщения при загрузке страницы, а затем скрыть их. Поэтому сначала снова скройте все сообщения: .elementor-posts .elementor-post { display: none; }
Хорошо, теперь я вижу вашу проблему: правило отменяется стилем кладки. Добавление !important не сработает, потому что это также переопределит эффект затухания. Вам нужно сделать селектор более конкретным. Вы можете добавить собственный класс в Elementor к виджету публикации, например 'исчезающий-пост-контейнер'. Тогда используйте .fade-in-post-container .elementor-posts .elementor-post { display: none; }
Хорошо, теперь это работает отлично - большое спасибо за помощь, а также за объяснение, я полностью понимаю проблемы, с которыми я столкнулся сейчас :)
Огромное спасибо! Могу я спросить, какие тесты вы делали и как вы их проходили? Поскольку я не могу заставить его работать. Теперь я поставил в очередь файл additional.js в нижнем колонтитуле, как было предложено, он все еще проходит, кажется, что это хорошо - я пробовал оба варианта кода js, но ничего не происходит, я также пробовал display: none ; для .elementor-posts и .elementor-post просто сами по себе ничего не происходит, добавляя! important, они просто полностью исчезают ... Есть идеи, что я делаю не так? Еще раз спасибо! :)