CODEWITHSUNDEEP
javascripthtmljquerycssfadein
Claudio Rizzi
Claudio Rizzi

Reputation: 29

Can`t figure out how fadein my div with jQuery

Obv

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/scripts.js"></script>

I have a link that point to a section down the page

<a id="seemore" class="seemore" href="#down">SEE MORE</a>

the css for the div that i want to fade in while moving to it

#down {
  margin-top: 100%;
  justify-content: center;
  visibility: hidden;
 }

but my script doesnt work :(

$("#seemore").click(function(){
  $("#seemore").fadeOut("fast");
  $("#down").fadeIn("slow");
});

Building this site in local

Upvotes: 0

Views: 67

Answers (2)

Visakh R krishnan
Visakh R krishnan

Reputation: 99

I this one is your looking for?

$(document).ready(function(){
$("#seemore").click(function(){
  $("#seemore").fadeOut("fast");
  $("#down").fadeIn("slow");
});
});
#down {
 display:none;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id="seemore" class="seemore" href="#down">SEE MORE</a>

<p id="down" >Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Upvotes: 1

Mihail Minkov
Mihail Minkov

Reputation: 2633

If you need the object to fadeIn, you have to start your object hidden using display: none.

You can check this example:

$("#show-more").click(function(e) {
  e.preventDefault();
  $("#show-more").hide();
  $("#more").fadeIn();
});
#more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<p id="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<a id="show-more" href="#">Show more</a>

Upvotes: 1

Related Questions