将动画添加到此jQuery脚本

为按钮中的一组数据过滤器提供相当简单的显示/隐藏脚本。我一直在寻找关于如何为转换设置动画的解决方案，但似乎无法看到这个脚本与jQuery网站上描述的不同。将动画添加到此jQuery脚本

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

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

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

来源

2016-02-25 kylebellamy

什么样的动画你想要？淡入淡出/向下滑动/向右滑动？ – Taplar

“隐藏秀”后，您的代码中出现错误，逗号错误。 – jcubic

糟糕的错误，遗漏了周围，谢谢。只是一个向下滑动动画。非常好奇，看看这是如何完成的。 – kylebellamy

而是改变类的，你可以使用内置的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/

来源

2016-02-25 16:34:50

我知道它必须简单，但我找不到理解它的正确页面。谢谢！ – 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(); 
});

来源

2016-02-25 16:34:33

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

来源

2016-02-25 16:36:07 Taplar

请提供您的答案解释/评论，而不仅仅是代码。 –

非常好！感谢您提供它的CSS版本。希望有多个正确的答案检查。 – kylebellamy

将动画添加到此jQuery脚本

回答

相关问题