向此 jQuery 脚本添加动画

Adding animation to this jQuery script

本文关键字：动画 添加 脚本 jQuery 向此      更新时间：2023-09-26

有一个相当简单的显示/隐藏脚本，用于按钮中的一组数据过滤器。我一直在寻找有关如何对过渡进行动画处理的解决方案，但似乎看不到此脚本与 jQuery 站点上描述的内容有何不同。

我在其他地方读到CSS3动画可能更容易或更好，但这对我来说仍然是一个谜。

是否有对此脚本的简单修改：

$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).toggleClass('hidden show');
});

您可以使用内置的 toggleX 方法（例如 toggle() 和 slideToggle() ），而不是更改类。

如果你想做一些更花哨的事情，比如动画颜色，你需要看看animate方法，可能包括jquery-ui，这是css3过渡可能更容易/更少的开销的地方，除非你已经包含jquery-ui。

$("#toggle").click(function() {
    $("#target").toggle(500);
});
$("#slide").click(function() {
    $("#target").slideToggle(500);
});

基本小提琴：https://jsfiddle.net/t2j03v6d/

$('.target').on( 'click', function () {
  var $stuff = $(this).find('.stuff');
  
  if ( $stuff.is(':visible') ) {
    $stuff.slideUp('slow');
  } else {
    $stuff.slideDown('slow');
  }
});
.target .stuff {
  display: none;
  
  height: 400px;
  background-color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="target">
    Show/Hide
    <div class="stuff"></div>
  </li>
</ul>

我不确定您要查找的动画，但在这里我使用了您提供的一些代码slideToggle() （http://api.jquery.com/slidetoggle/）： https://jsfiddle.net/8gavvmnL/1/

.HTML： 

<a class="toggle" href="#pop">Click Me</a>
<div id="pop">
  I'm hidden until the button is clicked!
</div>

j查询：

$("#pop").hide();
$('.toggle').click(function (event) {
    event.preventDefault();
    var target = $(this).attr('href');
    $(target).slideToggle();
});
相关文章：