Question

从按钮为一组数据过滤器提供相当简单的显示/隐藏脚本。我一直在寻找有关如何设置转换动画的解决方案，但似乎无法看到此脚本与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/）使用您提供的一些代码：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

您可以使用内置的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/

Answer 3

＆＃13;

$('.target').on( 'click', function () {
  var $stuff = $(this).find('.stuff');
  
  if ( $stuff.is(':visible') ) {
    $stuff.slideUp('slow');
  } else {
    $stuff.slideDown('slow');
  }
});

＆＃13;

.target .stuff {
  display: none;
  
  height: 400px;
  background-color: #F00;
}

＆＃13;

<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>

＆＃13;

向此jQuery脚本添加动画

3 个答案: