如何使两个功能在点击时做出反应答案

【问题标题】：How to make two functions react on a click如何使两个功能在点击时做出反应
【发布时间】：2014-04-18 02:09:48
【问题描述】：

我是 JS 新手。

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

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

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

这是我的 Javascript 代码

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

这是我的 HTML 代码

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

【问题讨论】：

你能用你的代码做一个小提琴吗？？？ --> jsfiddle.net
代码中提到的相关css在哪里...？
是的，要么制作一个 jsFiddle，要么至少提供动画和 fadeInDown CSS 类的标记？
“反向”是指单击同一个按钮吗？还是您的意思是在 .animate 调用中经过一段时间后？

标签： javascript jquery html animation slide

【解决方案1】：

试试这个：

我正在使用

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

在这里演示：http://jsfiddle.net/YEwUZ/509/

更新：

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

在这里演示：http://jsfiddle.net/YEwUZ/512/

【讨论】：

这很完美！谢谢！！ +1 只有我怎样才能设法使#profile-info 用动画而不是简单的fadeOut 函数淡出
谢谢...如果你想给它添加动画，你可以把jquery从fadeOut改成slideUp。演示：jsfiddle.net/YEwUZ/510
或者您可以将 div 设置为 position:relative; 并使用 jquery 动画：在此处查看演示：jsfiddle.net/YEwUZ/511
您还可以做一件事让它在淡入时变得更漂亮：您可以为不透明度设置动画，以便它同时完成所有操作：jsfiddle.net/YEwUZ/512

【解决方案2】：

试试这个：

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

【讨论】：

这很好用！只有文本会在瞬间消失而不是淡出。不过谢谢！

【解决方案3】：

您可以使用 jQuery 中的 fadeToggle(options) 和 toggleClass() 来实现此目的。

【讨论】：