Question

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

Answer 1

试试这个：

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

Answer 2

试试这个：

我正在使用

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

DEMO HERE：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;
}

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

Answer 3

您可以使用jQuery中的fadeToggle(options)和toggleClass()。

如何使两个功能对点击做出反应

3 个答案: