jquery – DIV中的Animate内容

2019年8月3日 186次阅读

好吧,这有点难以解释,因此有点难以搜索,所以请原谅我,如果之前有人问过的话.我将彻底解释.

我有一个带有不同数量图标的网页.当用户点击图标时,它应该在DIV中显示与该图标相关的内容.这是它变得棘手的地方.无论用户点击哪个图标,内容都应加载到同一个DIV中.但是,一次只能看到一个图标的内容.因此,如果加载“A”的内容,并且用户点击“B”,则“A”的内容应淡出并替换为内容“B”淡入,与“C”相同,“D, “等等(可能最多约为5).内容的大小可以变化很大,因此内容的包含DIV需要设置其高度的动画以适应当前内容.

我被困在哪里就是动画.我已经弄清楚如何隐藏和显示不同的内容基本上通过设置display：none;“和display：block;在不同的内容部分基于用户点击的位置,但我无法弄清楚如何获得任何类型的动画去.

我愿意使用预先制作的脚本,但请记住,图标和内容区域都是单独的包装器,因此普通的jQuery选项卡脚本或手风琴脚本不起作用.

到目前为止,这是我的sc ::

$(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;
}

如有必要,可以修改任何内容,但不能将它们放在单独的包装器中.

谢谢.

最佳答案 看看这个
jsFiddle;这是你想做的事情吗？

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>​

JavaScript的

// 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');
    });
});

您还可以分别用slideUp()和slideDown()替换fadeOut()和fadeIn(),以实现不同的动画效果.

我希望这有帮助！

点赞