Проблема переключения CSS-преобразования с помощью JQuery - PullRequest
Новая
       5

Проблема переключения CSS-преобразования с помощью JQuery

0 голосов
/ 16 октября 2019

Я пытаюсь переключить css-преобразование с помощью jquery. Я могу заставить первую половину работать на щелчке, но не могу заставить ее переключаться.

HTML: 

<div class="team-member">
                <div class="team-member-bio">
                    <h3>Team Member Name</h3>
                    <p>Team Member Title</p>
                    <p>
                       Team member bio content. 
                    </p>
                </div>
                <img class="team-member-img" src="" alt="">
                <div class="team-member-content">
                    <h3 class="team-member-name">Team Member Name</h3>
                    <p class="team-member-title">Team Member Title</p>
                </div>
            </div>

CSS: 

.team-member {

margin: 0 .75rem;
height: 30rem;
width: 25rem;
overflow: hidden;
position: relative;

}
.team-member-bio {

    position: absolute;
    z-index: 15;
    background-color: white;
    top: -100%;
    height: 100%;
    width: 100%;
    transition: all .4s;
}

JQuery (не работает): 

$(".team-member").click(function(){

    var bio = $(this).children('.team-member-bio');

    bio.toggle(
        function(){bio.css("transform", "translateY(100%)");},
        function(){bio.css("transform", "translateY(-100%)");}
      );
});

JQuery (который работает, но не имеет функции переключения): 

$(".team-member").click(function(){

    var bio = $(this).children('.team-member-bio');

    bio.css("transform", "translateY(100%)");
});

1 Ответ

1 голос
/ 16 октября 2019

Я не знаю, что вы пытаетесь, но это не правильное использование переключателя. См .: https://api.jquery.com/toggle/ Я думаю, вам может понадобиться анимация https://www.w3schools.com/css/css3_animations.asp

$(".team-member").click(function(){
    var bio = $(this).children('.team-member-bio');
    bio.toogleClass('transformed100');
});

css 

.team-member-bio {
  transform: translateY(-100%);
}
.team-member-bio.transformed100 {
  transform: translateY(100%);
}
...