Я пытаюсь создать сайт, и я хочу сделать что-то вроде этого. Я хочу показать три изображения, пока я прокручиваю страницу на каждом изображении «ссылку», чтобы показать больше контента, который появляется сразу после каждого изображения. Мне нужно, чтобы содержимое отображалось с постепенным исчезновением, и когда я нажимаю снова, он должен исчезать и исчезать (display: none;). Мне удалось сделать постепенное исчезновение, но не исчезнуть. Он исчезает без эффекта затухания. Также одновременно должен быть только один div. Вот код до сих пор:Как настроить работу (и упростить) это Show/Hide с FadeIn/FadeOut?
$('.expand, .card__btn-close').click(function() {
$('.toggleText').removeClass('fadeOut'),
$('.toggleText').toggleClass('fadeIn'),
$('.toggleText--two').removeClass('fadeIn'),
$('.toggleText--two').toggleClass('fadeOut');
$('.toggleText--three').removeClass('fadeIn'),
$('.toggleText--three').toggleClass('fadeOut');
});
$('.expand--two, .card__btn-close--two').click(function() {
$('.toggleText').removeClass('fadeIn'),
$('.toggleText').toggleClass('fadeOut'),
$('.toggleText--two').removeClass('fadeOut'),
$('.toggleText--two').toggleClass('fadeIn');
$('.toggleText--three').removeClass('fadeIn'),
$('.toggleText--three').toggleClass('fadeOut');
});
$('.expand--three, .card__btn-close--three').click(function() {
$('.toggleText').removeClass('fadeIn'),
$('.toggleText').toggleClass('fadeOut'),
$('.toggleText--two').removeClass('fadeIn'),
$('.toggleText--two').toggleClass('fadeOut');
$('.toggleText--three').removeClass('fadeOut'),
$('.toggleText--three').toggleClass('fadeIn');
});
.img {width:300px;height:50px;}
.toggleText.fadeIn, .toggleText--two.fadeIn, .toggleText--three.fadeIn {
-moz-animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
-ms-animation-duration: .5s;
animation-duration: .5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
display:block;
}
.toggleText, .toggleText--two, .toggleText--three, .toggleText.fadeOut, .toggleText--two.fadeOut, .toggleText--three.fadeOut {
-moz-animation-name: fadeOut;
-webkit-animation-name: fadeOut;
-ms-animation-name: fadeOut;
animation-name: fadeOut;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
-ms-animation-duration: .5s;
animation-duration: .5s;
display:none;
}
@-moz-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
@-webkit-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
@-ms-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
@-keyframes fadeIn { 0% { opacity: 0; display: none; } 100% { opacity: 1; display: block; }}
@-moz-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none; }}
@-webkit-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none; }}
@-ms-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none; }}
@-keyframes fadeOut { 0% { opacity: 1; display: block; } 100% { opacity: 0; display: none; }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Project 1 -->
<section>
<a class="expand">
<div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>
</a>
<div class="toggleText">
<div class="card__content card__btn-close" style="color: #F00">
Extra content 1 goes here!
Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor.
</div> <!-- /card content -->
</div> <!-- /toggleText -->
</section>
<!-- Project 2 -->
<section>
<a class="expand--two">
<div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>
</a>
<div class="toggleText--two">
<div class="card__content card__btn-close--two" style="color: #F0F">
Extra content 2 goes here!
Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor.
</div> <!-- /card content -->
</div> <!-- /toggleText -->
</section>
<!-- Project 3 -->
<section>
<a class="expand--three">
<div class="img" style="background-image: url(http://marketplaceadsonline.com/marketplace/txshe/static/images/externallinks/Shoppers.png)"></div>
</a>
<div class="toggleText--three">
<div class="card__content card__btn-close--three" style="color: #00F">
Extra content 3 goes here!
Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor.
</div> <!-- /card content -->
</div> <!-- /toggleText -->
</section>
<!-- Dummy content -->
<section>
<div style="padding-top:50px;color:#0FF;">Vestibulum elit libero, condimentum ac sapien quis, lobortis tincidunt eros. Integer vel sapien odio. Fusce in mauris vestibulum, consequat sapien vitae, eleifend orci. Nullam congue, libero ac auctor scelerisque, risus tellus dictum nulla, ut interdum velit neque quis nibh. Etiam nibh urna, suscipit non convallis nec, aliquam a sapien. Nullam eu sapien in neque volutpat pharetra quis sed augue. Ut elementum luctus dui vel mollis. Phasellus eget mollis nibh. Fusce commodo, nisi sit amet accumsan tincidunt, risus enim aliquam sem, a convallis elit ante vel sem. Praesent lobortis nunc et finibus tempus. Nunc non metus efficitur, iaculis sapien sit amet, tristique metus. Maecenas ut felis quis ante hendrerit tincidunt a vel turpis. Proin imperdiet est sed augue consectetur sollicitudin. Donec volutpat fermentum mi nec pulvinar. Duis et pellentesque ipsum, porta pharetra urna. Curabitur feugiat, odio at pellentesque porta, justo tortor tempus diam, a suscipit libero dolor ac tortor. </div>
</section>
Что мне нужно знать, как исчезнуть, прежде чем «дисплей: нет», а если CSS и Javascript может быть упрощена. Помимо этого, я хочу, чтобы страница прокручивала содержимое «Показать» до верхней части страницы, а также прокручивалась до той же позиции после того, как мы «Скрывали» контент.
Может ли кто-нибудь из вас помочь?
Педро
Вы пробовали SASS очистить свой CSS? Ваш шаблон 'removeClass',' toggleClass' также не очень чист. В общем, вы должны думать о том, чтобы генерировать обработчики ваших кликов более программно, а не писать повторяющийся, императивный код, как и у вас. Я думаю, вам лучше было бы понять, что это так, как сделать такой подход на самом деле. – jmargolisvt
Является ли мой ответ ниже того, что вы хотели? – programmer5000