向此 jQuery 脚本添加动画

Question

有一个相当简单的 show/hide 脚本，用于通过按钮设置一组数据过滤器。我一直在寻找有关如何为过渡设置动画的解决方案，但似乎看不出此脚本与 jQuery 网站上描述的内容有何不同。

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

这个脚本有没有简单的修改：

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

Answer 1

我不确定你要找什么动画，但我在这里使用了 slideToggle() (http://api.jquery.com/slidetoggle/) using some of the code you've provided: 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>

jQuery:

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

Answer 2

您可以使用 built-in toggleX 方法（例如 toggle() and slideToggle()），而不是更改类。

如果您想做一些更花哨的事情，例如动画颜色，您需要查看 animate 方法并可能包括 jquery-ui，这是css3 转换可能更容易/开销更少，除非您已经包含 jquery-ui.

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

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

基本fiddle：https://jsfiddle.net/t2j03v6d/

Answer 3

$('.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>

向此 jQuery 脚本添加动画

Adding animation to this jQuery script

javascript

css

jquery

animation

jquery-animate