下推内容的HTML / CSS动画

Question

I have a Bootstrap row that is hidden by default. After a click on a specific button the jQuery toggle() is called to toggle the display of this row.

Is there a way to animate that button to move down? The button is positioned below the row that is toggled to show/hide.

The #advancetoggle button should move down with animation, if I use CSS's transition: transform(0,100px) the button starts to move down but it jumps due to the row above that gets the display:block and it pushes the button far way down.

Thanks :)

 $("#advancetoggle").click(function(event) { event.stopPropagation(); $('#advanced-search').toggleClass('show hide'); if ($('#adv-icon').hasClass('icon-arrowdown')){ $('#adv-icon').removeClass('icon-arrowdown'); $('#adv-icon').addClass('icon-arrowup'); } else { $('#adv-icon').removeClass('icon-arrowup'); $('#adv-icon').addClass('icon-arrowdown'); } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <form id="advanced-search"> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="typeselect">Type</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="typeselect"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="basedin">Based in</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="basedin"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="town">Town</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="town"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <div class="btn btn-red"> RESET FILTER </div> </div> </form> </div> <div class="row"> <div class="advanced col-sm-2 col-xs-12"> <a href="#" class="glyphdown" id="advancetoggle"><i class="icon-arrowdown" id="adv-icon"></i></a> <span class="advanced-text"> Advanced Search</span> </div> </div> 

Answer 1

You have some issues in your code:

1. transition: transform(0,100px) should be transform: translate(0,100px) .
2. To get the transition you need to add transition:all .3s ease (for example).
3. Insert the span .advanced-text into the link #advancetoggle

 $("#advancetoggle").click(function(event) { event.stopPropagation(); $(this).css('transform', 'translate(0,100px)'); console.log($(this)); $('#advanced-search').toggleClass('show hide'); if ($('#adv-icon').hasClass('icon-arrowdown')){ $('#adv-icon').removeClass('icon-arrowdown'); $('#adv-icon').addClass('icon-arrowup'); } else { $('#adv-icon').removeClass('icon-arrowup'); $('#adv-icon').addClass('icon-arrowdown'); } }); 

 #advancetoggle { display:inline-block; transition:all .3s ease; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <form id="advanced-search"> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="typeselect">Type</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="typeselect"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="basedin">Based in</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="basedin"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="town">Town</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="town"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <div class="btn btn-red"> RESET FILTER </div> </div> </form> </div> <div class="row"> <div class="advanced col-sm-2 col-xs-12"> <a href="#" class="glyphdown" id="advancetoggle"> <i class="icon-arrowdown" id="adv-icon"></i> <span class="advanced-text">Advanced Search</span> </a> </div> </div> 

Answer 2

try this, I think this is what you want.hope this will help.

 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <style type="text/css"> .myrow{ display: none; margin: 10px; } .myrowtwo{ display: none; margin: 10px; } .buttonone , .buttontwo{ margin:10px; } </style> <body> <div class="btn btn-default buttonone">Press me !</div> <div class="row myrow"> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="basedin">Based in</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="basedin"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="town">Town</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="town"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> </div><br> <div class="clearfix"></div> <div class="btn btn-primary buttontwo">Press me now!</div> <div class="row myrowtwo"> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="basedin">Based in</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="basedin"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> <div class="col-sm-3 col-xs-12"> <label class="control-label" for="town">Town</label> <div class="custom-select fa-caret-down"> <select class="form-control" id="town"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> <option value="four">Four</option> <option value="five">Five</option> </select> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".buttonone").click(function(){ $(".myrow").toggle(); }); $(".buttontwo").click(function(){ $(".myrowtwo").toggle(); }); }); </script> </body> </html> 

I have used online bootstrap and jquery.good luck.