将动画添加到此jQuery脚本
为按钮中的一组数据过滤器提供相当简单的显示/隐藏脚本。我一直在寻找关于如何为转换设置动画的解决方案,但似乎无法看到这个脚本与jQuery网站上描述的不同。将动画添加到此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);
});
我知道它必须简单,但我找不到理解它的正确页面。谢谢! – kylebellamy
我不知道你要找的动画,但在这里我用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();
});
将'slideDown()'更改为'slideToggle()'以更好地匹配需求/操作代码 –
$('.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>
请提供您的答案解释/评论,而不仅仅是代码。 –
非常好!感谢您提供它的CSS版本。希望有多个正确的答案检查。 – kylebellamy
什么样的动画你想要?淡入淡出/向下滑动/向右滑动? – Taplar
“隐藏秀”后,您的代码中出现错误,逗号错误。 – jcubic
糟糕的错误,遗漏了周围,谢谢。 只是一个向下滑动动画。非常好奇,看看这是如何完成的。 – kylebellamy