jquery - 如何将 .animate 添加到我的 html 中？

Question

我有这个 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};
     });
});

Answer 1

您不能使用不存在.controlgroup的原因。使用属性选择器class
[]

jsBin 演示

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

或者还有：

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

jsBin 演示

Answer 2

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

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