Question

我有搜索图标宽度onclick功能

<span onclick="mobileSearch()" 
      class="flaticon-magnifier-tool search-iconmob hidden-lg hidden-md"> 
</span>

并形成：

<form role="search" method="get" id="searchform" c .........

默认情况下，

表单是隐藏的，上面的脚本效果很好。

<script type="text/javascript">
function mobileSearch() {
    var x = document.getElementById("searchform");
    if (x.style.display === "block") {
            x.style.display = "none";
    } else {
            x.style.display = "block";
    }
}
</script>

我的问题是，我无法添加动画效果..如何制作这个？最好的是下滑效果。

Answer 1

对于这个任务，我会使用jQuery，使用fadeToggle（）函数实现你正在寻找的效果非常简单。

以下是一个例子：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

您可以点击http://themesflat.com/html/nah/portfolio-creative.html进行测试。

Answer 2

如果你不想使用jQuery。您可以简单地创建css类并为它们设置transition属性并使用关键帧。然后单击切换css类。简单的css示例（你应该更复杂）：

.class { top: 0, position: absolute, transition: .3s }

.slideDown { top: 99999px }

在点击功能上添加动画

2 个答案: