Question

我在尝试运行网站时遇到问题。我想要做的是移动，然后在按钮单击上展开div。单击后，按钮中的文本将变为“关闭”。单击关闭按钮时，div将返回其原始位置。

对于我的生活，我无法弄清楚如何让它发挥作用。

这是我到目前为止所拥有的

           <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script> 

var text = 1;

$('button').click(function(){
    if(text == 1){
        $("div.div1").toggleClass("animateSlide");
        $('button').html('Go Back');
        text = 0;
    } else{
        $("div.div1").toggleClass("animateSlide");
        $('button').html('Start Animation');
        text = 1;
    }
});
    </script> 
    </head>
    <body>





   <div class="container-fluid">
  <div class="row-fluid">

    <div class="col-xs-12 v-center">
        <div class="content text-center">

            <div class="col-xs-4 animated slideInRight  ">
                <div class="div1"><button>Start Animation</button></div>


            </div>
             <div class="col-xs-2 animated slideInRight"> <a href="#">       hello</a>


            </div>
             <div class="col-xs-2 animated slideInRight"><p>hello</p>

            </div>

        </div>
      </div>


      <style>
.div1{
    transition: all .5s;
    background:#98bf21;
    height:100px;
    width:100px;
    position:absolute;
}

.animateSlide{
    width: 150px;
    height: 150px;
    opacity: .5;
    margin-left:100px;
}</style>
    </body>
    </html>

Answer 1

创建一个单独的类并使用.toggleClass()

var text = 1;

$('button').click(function(){
    if(text == 1){
        $('div').toggleClass('animated');
        $('button').html('Go Back');
        text = 0;
    } else{
        $('div').toggleClass('animated');
        $('button').html('Start Animation');
        text = 1;
    }
});

div{
    transition: all .5s;
    background:#98bf21;
    height:100px;
    width:100px;
    position:absolute;
}

.animated{
    width: 150px;
    height: 150px;
    opacity: .5;
    margin-left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><button>Start Animation</button></div>

Answer 2

将第二个动画函数传递给第一个函数的回调变量。

（Demo）

$(document).ready(function(){
    var c=0;
    $("button").click(function(){
        $("div").animate({
            left: ++c%2*100 ,
            opacity: '0.5',
            height: '150px',
            width: '150px'
        },'fast', function() {
            $(this).animate({
                width: "100px",
                height: "100px"
            }, 500);
        });
    });
});

使用js / jquery扩展和收回div

2 个答案: