Jquery Accordion-使用动画打开内容

我有这个问题：

它几乎是完美的，除了我想让它以动画的方式显示内容。现在它只是突然打开，但我想让它慢慢打开。使其进入视口顶部的动画效果很好，但我需要将其设置为当有人单击某个元素时，内容缓慢打开的位置

有什么想法吗

<script>
$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
        }         
    });
});
</script>

<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>

$（文档）.ready（函数（）{
$（'.accordion'）。单击（函数（）{
if（$（this）.next（'.container'）。是（':visible'））{
$（this.removeClass（'show'）；
$（this.next（'.container'）.slideUp（）；
}
否则{
$（'.accordion'）.find（'.container:visible'）.slideUp（）；
$（'.accordion'）.removeClass（'show'）；
$（this.addClass（'show'）；
$（this.next（'.container'）.slideDown（）；
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 200);
}         
});
});
标题
样本含量
内容在这里

标题
样本含量
内容在这里

刚刚让您的幻灯片在完成时删除show类，并在最后使用slideDown函数显示您的容器

$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            var self = $(this);
            $(this).next('.container').slideUp(800,function() {
                self.removeClass('show');
            });
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
            $(this).slideDown();
        }         
    });
});

---

它正在运行：

是的，只需使用

slideUp（）

和

slideDown（）

方法，而不是简单地添加

show

类

---

好的。这是我解决你问题的尝试。看看下面的提琴或片段

片段：

var accordions=null；
var=null；
var slideDuration=400；
var=400；
var body=null；
var classNameShow='show'；
var classnameacordion='.accordion'；
var classNameContainer='.container'；
var dataOffsetTop='offsetTop'；
$（文档）.ready（函数（）{
body=$（'html，body'）；
手风琴=$（classNameAccordion）；
容器=$（classNameContainer）；
手风琴。每个（功能（）{
var openedAccordions=accordios.filter（函数（）{return$（this.hasClass（classNameShow）；}）；
removeClass（classNameShow）；
$（this）.data（dataOffsetTop，$（this）.offset（）.top）；
openedaccordins.next（classNameContainer）.stop（true）.slideDown({
持续时间：幻灯片教学，
complete:function（）{openedaccordins.addClass（classNameShow）；}
});
});
手风琴。单击（函数（）{
var currentAccordion=$（此）；
var currentContainer=$（this）.next（classNameContainer）；
var openedAccordions=accordios.filter（函数（）{return$（this.hasClass（classNameShow）；}）；
if（！currentAccordion.hasClass（classNameShow））{
currentContainer.stop（true）.向下滑动({
持续时间：幻灯片教学，
完成：函数（）{currentAccordion.addClass（classNameShow）；}
});
设置动画（{scrollTop:currentAccordion.data（dataOffsetTop）}，scrollDuration）；
}否则{
currentContainer.stop（true）.slideUp({
持续时间：幻灯片教学，
complete:function（）{currentAccordion.removeClass（classNameShow）；}
});
}
containers.not（currentContainer）.stop（true）.slideUp({
持续时间：幻灯片教学，
complete:function（）{openedaccordins.removeClass（classNameShow）；}
});
});
});
手风琴{
保证金：0；
填充：10px；
高度：20px；
边框顶部：#F0 1px实心；
背景:#中交;；
字体系列：Arial、Helvetica、无衬线字体；
文字装饰：无；
文本转换：大写；
颜色：#000；
字号：1em；
}
.手风琴音程{
背景：#000；
颜色：#fff；
}
.show span{
显示：块；
浮动：对；
填充：10px；
}
.手风琴音程{
显示：块；
浮动：对；
背景：url(http://www.snyderplace.com/demos/images/plus.png)中心不重复；
填充：10px；
}
.show span{
背景：url(http://www.snyderplace.com/demos/images/minus.png)中心不重复；
}
分区集装箱{
填充：0；
保证金：0；
显示：无；
}
部门内容{
背景：#f0；
保证金：0；
填充：10px；
字体大小：.9em；
线高：1.5em；
字体系列：“Helvetica Neue”，Arial，Helvetica，日内瓦，无衬线；
}
第二部分内容ul，第三部分内容p{
保证金：0；
填充：3倍；
}
李国章{
列表样式位置：内部；
线高：25px；
}
第二部分内容{
颜色：#555555；
}
div.show+容器{
显示：块；
}

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

标题
样本含量
内容在这里

太接近了。在你的小提琴中，我注意到当我第二次单击一个元素时（在它已经滑到顶部之后），它会在打开时设置动画，但是有没有办法让它在我第一次单击它时设置打开动画（当它滚动到顶部时）？所以基本上会有tw