CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RonTheOld
RonTheOld

Reputation: 777

Fade in div onclick button

Hi guys i have 2 divs with information inside of them and i want it so that when the user clicks on button 1/2 it shows the correct DIV. I have manged to get this far and make that work however i want to try and put an animation on them so it docent just quickly come up on the screen. So fading the text in and out when they click the button. I am not sure if there is a library for this as i have used AOS library before but that is for scrolling and not an on click function.

HTML: 

 <button type="button" class="btn btn-warning" id="header1">Företagstelefoni</button>
  <button type="button" class="btn btn-warning" id="header2">Reklambyrå</button>

        <div class="parallax1" id="section_one" >
            <div class="row newtryh2">
                 ........
            </div>
       </div>

        <div class="parallax1" id="section_two">
            <div class="row newtryh2">
                 ........
            </div>
       </div>

JS:

$("#header1").click(function () {

    $("#section_one").show();
    $("#section_two").hide();
});
$("#header2").click(function () {

    $("#section_two").show();
    $("#section_one").hide();

});

CSS:

.parallax1 {
    padding-left: 30px;
        margin-top: 33px;
        display: none;
}

Fiddle Link

So I'm just trying to add some animation like fading it in nicely so it doesn't snap onto the screen and fading it out. If anyone can help me out with this or knows any libraries out there such as AOS which works on a onclick that would be great.

Thanks

Upvotes: 1

Views: 2446

Answers (1)

Zak
Zak

Reputation: 7523

Use fadeIn() and fadeOut()

IE $("#section_two").fadeIn('fast');

https://jsfiddle.net/t5h1up21/5/

Conversely you can use fadeToggle()

EDIT

The function with callback would look like:

$("#section_two").fadeOut('slow', function() {
    $("#section_one").fadeIn('fast'); // Or whatever your selector is
});

Upvotes: 1

Related Questions