按下内容的HTML/CSS动画

我有一个默认隐藏的引导行。点击一个特定的按钮后，将调用jQuery toggle()来切换此行的显示。按下内容的HTML/CSS动画

有没有办法让动画按钮向下移动？该按钮位于切换显示/隐藏的行的下方。

#advancetoggle按钮应该随着动画向下移动，如果我使用CSS的transition: transform(0,100px)按钮开始向下移动，但由于上面的行获得了display：block并且它将按钮向下推动，所以它会跳转。

谢谢:)

$("#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>

来源

2016-03-14 user3395711

嘿，请分享jsfiddle链接，并在其中添加CSS。这将很好地解释你的问题。 –

您能否提供样式的小提琴来复制它？ –

你有一些问题，在您的代码：

transition: transform(0,100px)应该transform: translate(0,100px)。
要获得转换，您需要添加transition:all .3s ease（例如）。
插入跨度.advanced-text到链路#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>

来源

2016-03-14 09:49:36

非常感谢，它的工作:) – user3395711

我的荣幸;）祝你好运 –

试试这个，我觉得这是你want.hope这是什么会有所帮助。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
\t <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
</head> 
 
<style type="text/css"> 
 
\t .myrow{ 
 
\t \t display: none; 
 
\t \t margin: 10px; 
 
\t } 
 

 
\t .myrowtwo{ 
 
\t \t display: none; 
 
\t \t margin: 10px; 
 
\t } 
 

 
\t .buttonone , .buttontwo{ 
 
\t \t margin:10px; 
 
\t } 
 
</style> 
 
<body> 
 

 
<div class="btn btn-default buttonone">Press me !</div> 
 
<div class="row myrow"> 
 
\t <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"> 
 
\t <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"> 
 
\t $(document).ready(function(){ 
 
     $(".buttonone").click(function(){ 
 
     \t $(".myrow").toggle(); 
 
     }); 
 

 
     $(".buttontwo").click(function(){ 
 
     \t $(".myrowtwo").toggle(); 
 
     }); 
 
\t }); 
 
</script> 
 

 
</body> 
 
</html>

我用网上的引导和jquery.good运气。

来源

2016-03-14 10:10:55

按下内容的HTML/CSS动画

回答

相关问题