如何使两个功能上的点击反应 [英] How to make two functions react on a click

问题描述

我是新来的JS。

现在，我设法让文本出现，一个div幻灯片当我点击一个div的权利。

问题是：我如何能做到这一点相反？ （具有相同的动画）

我试过if / else语句，但我不能完成它。希望你们当中有些人能帮助我。

这是我的Javascript code

  $（文件）。就绪（函数（）{
        $（'＃配置文件'）。点击（函数（）{
            $（'＃配置文件的信息）淡入（）addClass（动画fadeInDown'）。
            $（'＃配置文件'）动画（{左：'200像素'}，800，'摇摆'）;
        }）;
    }）;
 

这是我的HTML code

 ＆lt;节＆GT;
＆LT; D​​IV ID =配置文件＆GT;
    ＆LT; / DIV＆GT;
        ＆LT; D​​IV ID =配置文件的照片＆GT;
        ＆LT; / DIV＆GT;
            ＆LT; D​​IV ID =配置文件的信息＆GT;
                ＆LT; P＆GT;你好，我是＆LT; / P＆GT;
                    ＆LT; P＆GT;里克詹姆斯＆LT; / P＆GT;
            ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

解决方案

试试这个：

我用

 如果（$（＃配置文件的信息）。是（：隐藏））{
   //做这个
}其他{
   //做这个
}
 

所以基本上，如果它是隐藏它会做code时，如果没有，其他所需的code

  $（文件）。就绪（函数（）{
        $（'＃配置文件'）。点击（函数（）{
           如果（$（＃配置文件的信息）。是（：隐藏））{
            $（'＃配置文件的信息）淡入（）addClass（动画fadeInDown'）。
            $（'＃配置文件'）动画（{左：'200像素'}，800，'摇摆'）;
           }其他{
            $（'＃配置文件的信息）淡出（）removeClass移除（动画fadeInDown'）。
            $（'＃配置文件'）动画（{左：'200像素'}，800，'摇摆'）;
           }
        }）;
    }）;
 

DEMO的位置： http://jsfiddle.net/YEwUZ/509/

更新：

JQUERY

  $（文件）。就绪（函数（）{
        $（'＃配置文件'）。点击（函数（）{
           如果（$（＃配置文件的信息）。是（：隐藏））{
            $（'＃配置文件的信息）淡入（）addClass（动画fadeInDown'）。
            $（'＃配置文件的信息）动画（{左：0像素，不透明度：1}，800，'摇摆'）;           }其他{
            $（'＃配置文件的信息）动画（{左：'200像素，不透明度：0}，800，'摇摆'）;
            $（'＃配置文件的信息）淡出（）removeClass移除（动画fadeInDown'）。         }
      }）;
 }）;
 

HTML

 ＆lt;节＆GT;
        ＆LT; D​​IV ID =配置文件＆GT;
            测试
        ＆LT; / DIV＆GT;        ＆LT; D​​IV ID =配置文件的照片＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV ID =配置文件的信息＆GT;
            ＆LT; P＆GT;你好，我是＆LT; / P＆GT;
            ＆LT; P＆GT;里克詹姆斯＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

CSS

 ＃配置文件的信息{
    显示：无;
    位置：相对;
    左：200像素;
    不透明度：0;
}
 

DEMO的位置： http://jsfiddle.net/YEwUZ/512/

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>

解决方案

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/

这篇关于如何使两个功能上的点击反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！