Javascript 如何使两个函数在单击时作出反应

我是JS的新手

现在，当我点击一个div时，我设法使一个文本出现，并使一个div向右滑动

问题是：我怎样才能反过来做到这一点？（使用相同的动画）

我尝试了if/else语句，但无法完成。希望你们中的一些人能帮助我

这是我的Javascript代码

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

<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>

这是我的HTML代码

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

<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>

你好，我是

里克·詹姆斯

试试这个：

$(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'); 
       } 
    });
});

---

您可以使用jQuery中的

fadeToggle（选项）

和

toggleClass（）

进行此操作。

尝试以下操作：

我正在使用

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

因此，基本上，如果它是隐藏的，它将执行代码，如果不是，则执行其他所需的代码

$(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');
           }
        });
    });

此处演示：

更新：

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有哪些…？是的，制作一个JSFIDLE或至少提供动画和fadeInDown css类的标记？这里的“反向”是指单击同一个按钮吗？或者你的意思是在.animate调用中经过一段时间后？这很好！只有文本会在瞬间消失，而不是消失。但是谢谢！这工作完美！谢谢+1只有我如何才能通过动画而不是简单的淡出功能使#个人资料信息淡出谢谢。。。如果您想添加动画，您可以将jquery从

fadeOut

更改为类似于

slideUp

。演示：或者您可以将div设置为

position:relative

并将动画与jquery一起使用：请参见此处的演示：当它淡入时，您还可以做一件事使它变得更漂亮：您可以设置不透明度的动画，以便它一次完成所有操作：