如何将 .animate 添加到我的 html 中？答案

【问题标题】：How do I add .animate to my html?如何将 .animate 添加到我的 html 中？
【发布时间】：2012-11-13 21:19:23
【问题描述】：

我有这个 html

 <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a">
        <h3>$11.48   -  10/31/2012   -   Duane Reade #14410  -  Brooklyn Ny</h3>
        <div data-role="controlgroup"  data-type="horizontal">
          <a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
          <a class="red" href="#" data-role="button">No</a>
          <a class= "blue" href="IDontKnow.html" data-transition="slide" data-role="button">I don't know</a>
        </div>
    </div>

点击时它会折叠内容。我想给它添加一个动画让它慢慢打开？我假设我使用 .animate ？

我试过了：

$('document').ready(function(){
    $('.theListItem').click(function(){
           $('.controlgroup').animate({height: 100%,), 500};
     });
});

【问题讨论】：

$('document').ready(function(){ $('.theListItem').click(function(){ $('.controlgroup').animate({height: 100% ,), 500} }); });

标签： jquery html jquery-mobile jquery-animate collapsable

【解决方案1】：

您不能使用.controlgroup，因为class 确实不存在。
使用属性选择器[]

jsBin demo

$(function(){
    $('.theListItem').click(function(){
           $('[data-role="controlgroup"]', this).animate({height: 'toggle'}, 500);
     });
});

也可以：

$('[data-role="controlgroup"]', this).slideToggle(500);

jsBin demo

【讨论】：

抱歉消失了。当我单击下面的按钮之一时，这似乎有效，但我希望它在单击可折叠链接时切换，所以我尝试了这个 $(function(){ $('.theListItem').click(function(){ $ ('[data-role="collapsible"]', this).animate({height: 'toggle'}, 500); }); });但没有骰子。非常感谢。
您介意解释一下哪个是可折叠链接吗？因为这里工作得很好：jsbin.com/eduhiv/3/edit

【解决方案2】：

$(document).ready(function() {
    $('.theListItem').click(function() {
        $('.controlgroup').slideToggle(500);
    }
}

我猜你想有这样的滑动效果 - 如果你想滑动，你应该使用幻灯片;）。

【讨论】：