Jquery 在DIV中设置内容动画

好吧，这有点难以解释，因此有点难以搜索，所以如果以前有人问过，请原谅我。我会详细解释的

我有一个带有不同数量图标的网页。当用户单击图标时，它应该在

DIV

中显示与该图标相关的内容。这就是它变得棘手的地方。无论用户单击哪个图标，内容都应加载到相同的

DIV

。但是，一次只能看到一个图标的内容。因此，如果加载了“A”的内容，并且用户单击了“B”，则“A”的内容应淡出，并替换为淡入的内容“B”，与“C”、“D”等内容相同（可能最多5个）。内容的大小可能差异很大，因此内容的包含

DIV

需要设置其高度的动画，以适应当前内容

我被困的地方是动画。通过设置

display:none，我基本上了解了如何隐藏和显示不同的内容

“和

根据用户单击的位置在不同的内容部分显示：block；

，但我不知道如何播放任何类型的动画

我愿意使用预先制作的脚本，但请记住，图标和内容区域在单独的包装中，所以普通的jQuery选项卡脚本或手风琴脚本是不起作用的

以下是我迄今为止的scirpt：

$(document).ready(function() {  
    $(".heading").click(function(event) {       
        // remove active class from previous, add to current
        $(".hidden.active").removeClass("active");
        $(".hidden." + activeContent).addClass("active");       
    }); 
});

.hidden

和

.active

的CSS：

.hidden {
    display: none;
}
.hidden.active{
    display: block !important;
}

如果有必要，任何东西都可以修改，但事实上它们是在不同的包装中

---

谢谢。

添加

overflow:hidden

，否则

div

将在您有机会制作动画之前捕捉以适应新内容的宽度/高度。

看看这一点；您希望这样做吗

HTML

<div id="content">
    <div id="content-1" class="content-container">...</div>
    <div id="content-2" class="content-container">...</div>
    <div id="content-3" class="content-container">...</div>
</dvi>

<div id="buttons">
    <a href="#" data-target="content-1">Content 1</a>
    <a href="#" data-target="content-2">Content 2</a>
    <a href="#" data-target="content-3">Content 3</a>
</div>​

还可以分别用和替换和，以实现不同的动画效果

我希望这有帮助！

给你：

它还不是很新奇，但它很简单，易于理解，易于扩展

更新：

$（“#菜单按钮”）。单击（函数（）{
变量标识符=$（this.attr（“数据内容引用”）；
var newContent=$（“#content-”+标识符）.html（）；
$（“#显示”）.fadeOut（'slow'，function（）{
$（“#显示”）.html（新内容）；
$（“#显示”）。设置动画({
不透明度：1，
高度：“切换”
}，300，函数（）{
//动画完成。
});
});
})；

。隐藏内容{
显示：无；
}

A.
B
C
D
E
F
内容在这里！
一些内容来自
B部分内容

新线
C中的一些内容

新线

新线
来自D的一些内容

新线

新线

另一个
来自E的一些内容
F

中的一些内容表示歉意，如果我误解了（a，如上所述，将非常有帮助），但您似乎只需要通过调用作为回调来调用，大致如下：

//试一下http://jsfiddle.net/XyUps/1/
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.active”）.fadeOut（1000，函数（）{
$（this.sillides（“div”）.addClass（“active”）.fadeIn（）；
$（此）.removeClass（“活动”）；
});
});
});

在这里，

fadeOut（）

中的第二个参数是回调，这是一个在动画完成后运行的函数：这是一种在jQuery中使动画连续的好方法（只需将它们放在后续行中，它们就会同时运行，这可能不是您想要的）

---

一旦掌握了基本原理，就可以使用该函数以相同的方式设置更多/不同属性的动画（

fadeOut

是

animate（{display:'none'}）

等的缩写）.

也发布HTML，或者更好，创建一个显示/隐藏内容的列表供我们使用！您希望这两个东西同时可见吗？即，淡出和淡出同时发生？另一个选项-淡出发生在您启动新内容请求时，淡出开始一旦响应返回。无论哪种方式，为了获得重叠效果，您都希望包装器具有位置：相对，内部内容片段具有位置：绝对；顶部：0；左侧：0；从jQuery UI查看

addClass

和

removeClass

：什么是

activeContent

。要显示的新内容？@FelixKling I do我不认为这就是问题所在……问题在于以动态的方式为新内容制作动画，而不是css中静态定义的东西。这似乎是一个合理的答案，但事实上你不知道，所以这是一个猜测，而不是答案，直到问题被澄清/补充更多信息。我认为问题启用was将内容div的边界设置为适应新内容所需的新边界（而不是每次加载新内容时重置），但接近：）好吧，如果div被放置在某个HTML环境中，环境会随着div而变化，这不是你的意思吗？sg3s，谢谢你的帮助，但是两次提到JSFIDLE并链接到“AddNewFIDLE”是一个深思熟虑的选择“页面而不是我的解决方案。谢谢，这很好。唯一的问题是，有没有办法一开始就隐藏所有内容，然后显示用户单击的内容？我已经试着修改它大约一个小时了，但还没有弄明白。（我几乎可以得到它，但它跳转到新的内容，然后淡出并返回，真的很奇怪）。@Rev你能把你的工作代码发布到jsfiddle.net上吗？我可以看看发生了什么。（CSS没关系，我就是受不了没有样式的文本lol）

// Hide all but First Content Container //
$('.content-container').hide().first().show();

// Bind to Button click Event //
$('#buttons a').bind('click', function(e){
    e.preventDefault();

    // Set New Target from Button data-target Attribute //
    var $target = $('#'+$(this).data('target'));

    // Fade Out :visible Content and Fade In Target Content //
    $('.content-container').filter(':visible').fadeOut('slow', function(){
        $target.fadeIn('fast');
    });
});