CODEWITHSUNDEEP
javascriptjqueryhtmlanimationslide
Juntra
Juntra

Reputation: 119

How to make two functions react on a click

I am new to JS.

Right now I managed to make a text appear and a div slide to the right when I click on a div.

The problem is: How can I manage to do this in reverse? (with the same animation)

I tried the if/else statement but I cant get it done. Hope some of you can help me.

Here is my Javascript code

$(document).ready(function(){
        $('#profile').click(function() {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
        });
    });

Here is my HTML code

<section>
<div id="profile">
    </div>
        <div id="profile-photo">
        </div>
            <div id="profile-info">
                <p>Hello, I'm</p> 
                    <p>Rick James</p>
            </div>
</section>

Upvotes: 0

Views: 158

Answers (3)

JCBiggar
JCBiggar

Reputation: 2497

Try this:

I'm using 

if ( $( "#profile-info" ).is( ":hidden" ) ) { 
   //do this
} else {
   //do this
}

So basically if it is hidden it will do the code, the if not, the other desired code

$(document).ready(function(){
        $('#profile').click(function() {
           if ( $( "#profile-info" ).is( ":hidden" ) ) {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
           } else {
            $('#profile-info').fadeOut("").removeClass('animated fadeInDown');
            $('#profile').animate({left:'200px'}, 800,'swing');
           }
        });
    });

DEMO HERE: http://jsfiddle.net/YEwUZ/509/

UPDATED:

JQUERY

$(document).ready(function(){
        $('#profile').click(function() {
           if ( $( "#profile-info" ).is( ":hidden" ) ) {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile-info').animate({left:'0px',opacity:1}, 800,'swing');

           } else {
            $('#profile-info').animate({left:'200px',opacity:0}, 800,'swing');
            $('#profile-info').fadeOut("").removeClass('animated fadeInDown');

         }
      });
 });

HTML

<section>
        <div id="profile">
            test
        </div>

        <div id="profile-photo">
        </div>

        <div id="profile-info">
            <p>Hello, I'm</p> 
            <p>Rick James</p>
        </div>
</section>

CSS

#profile-info {
    display: none;
    position:relative;
    left:200px;
    opacity:0;
}

DEMO HERE: http://jsfiddle.net/YEwUZ/512/

Upvotes: 1

Rizwan Ahmed
Rizwan Ahmed

Reputation: 146

You can use fadeToggle(options) and toggleClass() from jQuery for this.

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this:

$(document).ready(function(){
    $('#profile').click(function() {
        if($(this).css('left') !== '200px'){
        $('#profile-info').fadeIn("").addClass('animated fadeInDown');
        $('#profile').animate({left:'200px'}, 800,'swing');
       } else {
             $('#profile-info').fadeIn("").removeClass('animated fadeInDown');
        $('#profile').animate({left:'0px'}, 800,'swing'); 
       } 
    });
});

Upvotes: 1

Related Questions