Исключение подкласса из анимации в Jquery / CSS


Исключение подкласса из анимации в Jquery / CSS

29.08.2019 04:31:03 Просмотров 75 Источник

У меня есть сайт, где я использую небольшую функцию jQuery и css для перевода раздела на прокрутку страницы (исчезает и перемещается вверх).

Все разделы, которые я не хочу анимировать, имеют подкласс "sp-portfolio", т. е. sp-page-builder .section .sp-portfolio, но функция работает .sp-page-builder sectionсм. ниже (обратите внимание, что это работает в Joomla, поэтому немного отличается синтаксис в начале:

jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section")
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(".sp-portfolio")[0]){
        //Do Nothing
        } else {
            if (jQuery(tag).position().top < pageBottom) {
                jQuery(tag).addClass("visible").delay( 800 )
            } else {
                jQuery(tag).removeClass("visible")
            }
        }
    }
})

Css-это:

/** Animation test **/
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)) {
  opacity: 0;
  transition: opacity 1s;
  transform: translate(0, 100px); 
  transition: all 0.6s;
}
.sp-page-builder section:nth-child(n+3):not(:nth-last-child(-n+2)).visible { 
  opacity: 1;
  transform: translate(0, 0);
}

Есть ли способ проверить, если подкласс .sp-portfolio существует, и если это так, чтобы пропустить функцию в этом разделе.

Приведенный выше код просто пропускает функцию на всей странице, а не переходит к следующему разделу.

Пример страницы можно посмотреть здесь: SP Portfolio-разделы, которые не должны двигаться,- это "наша работа" и "последние идеи".

У вопроса есть решение - Посмотреть?

Ответы - Исключение подкласса из анимации в Jquery / CSS / Excluding a sub-class from an animation in Jquery/CSS

dmuensterer

29.08.2019 04:34:10

Вы можете проверить, существует ли элемент с классом sp-portfolioв JavaScript.

if ($(".sp-portfolio")[0]){
    // Class exists
} else {
    // Class does not exist
}
https://stackoverflow.com/questions/57711326/excluding-a-sub-class-from-an-animation-in-jquery-css/57711379#comment101946259_57711379
Спасибо Доминик, я все еще пытаюсь заставить это работать-очевидно, если класс существует в разделе, я хочу перейти к следующему разделу, но не уверен, как это сделать? Я добавил if / else в существующий код, но это, похоже, не имеет эффекта. Пожалуйста, смотрите обновленный код.
Arne

02.09.2019 11:01:02

Поскольку вы находитесь в цикле с вашим ifи запрос if должен ссылаться только на текущий элемент, этот элемент также должен быть адресован.

Вы можете легко сделать это, изменив свой код

if

в

if (jQuery(".sp-portfolio")[0]){

Используемый код всегда ссылается на первый элемент на всей веб-странице с соответствующим классом, независимо от того, находится ли он в цикле или нет. Поэтому, если класс существует только один раз – независимо от того, где на странице-запрос всегда возвращает if (jQuery(tag).hasClass(".sp-portfolio")){и ведет себя правильно.

С небольшой настройкой вы просто ссылаетесь на текущий элемент в цикле, а не на всю страницу.

Я надеюсь, что это может помочь. :)

Growyour GK

03.09.2019 09:35:39

<script>
jQuery(document).on("scroll", function () {
    var pageTop = jQuery(document).scrollTop()
    var pageBottom = pageTop + jQuery(window).height()
    var tags = jQuery(".sp-page-builder section").not(".sp-portfolio");
    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i]
        if (jQuery(tag).position().top < pageBottom) {
            jQuery(tag).addClass("visible").delay( 800 )
        } else {
            jQuery(tag).removeClass("visible")
        }
    }
})
</script>

Вы должны использовать .не функция jQuery, которая позволит вам выбрать только те .элемент раздела sp-page-builder, который не имеет класса sp-portfolio.

Является ответом!
Jan Misker

03.09.2019 05:17:51

При перечитывании я замечаю, что то .sp-portfolioнаходится не на section, а где-то ниже в дереве DOM. В этом случае проще всего было бы просто исправить ваш код следующим образом:

if (jQuery(".sp-portfolio")[0]){
    //Do Nothing
} else {

Можно было бы переписать следующим образом

if (jQuery(".sp-portfolio", tag).length){
    //Do Nothing
} else {

Указание tagв качестве второго параметра означает, что jQuery выполняет поиск только внутри этого элемента (он же контекст ).


В запросе можно использовать селектор :not ().

var tags = jQuery(".sp-page-builder section:not(.sp-portfolio)")

Таким образом, вы получаете только sections, который не имеет класса .sp-portfolio.

Помочь в развитии проекта:
Закрыть X