Question

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

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

我被困在哪里就是动画。我已经弄清楚如何隐藏和显示不同的内容基本上是根据用户点击的位置在不同的内容部分设置display: none;“和display: block;，但我无法弄清楚如何获取任何内容有点动画。

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

到目前为止，这是我的风云：

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

如果需要，可以修改任何内容，但不能将它们放在单独的包装器中。

感谢。

Answer 1

看看这个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');
    });
});

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

我希望这有帮助！

Answer 2

添加overflow:hidden，否则在您有机会进行动画之前，div会捕捉以适应新内容的宽度/高度。

Answer 3

在这里：http://jsfiddle.net/huckepick/XtuX2/

它还不是很花哨。但它简单易懂，易于扩展。

更新：Added support for animated size change

$('#menu button').click(function() {
  var identifier = $(this).attr("data-content-reference");
  var newContent = $("#content-" + identifier).html();
  $('#display').fadeOut('slow', function() {
    $("#display").html(newContent);
    $('#display').animate({
      opacity: 1,
      height: 'toggle'
    }, 300, function() {
      // Animation complete.
    });
  });
});

.hidden-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <button data-content-reference="a">A</button>
  <button data-content-reference="b">B</button>
  <button data-content-reference="c">C</button>
  <button data-content-reference="d">D</button>
  <button data-content-reference="e">E</button>
  <button data-content-reference="f">F</button>
</div>
<div id="display">
  content goes here!
</div>

<div class="hidden-content" id="content-a">some content from A</div>
<div class="hidden-content" id="content-b">some content from B
  <br/>new line</div>
<div class="hidden-content" id="content-c">some content from C
  <br/>new line
  <br/>new line</div>
<div class="hidden-content" id="content-d">some content from D
  <br/>new line
  <br/>new line
  <br/>another one</div>
<div class="hidden-content" id="content-e">some content from E</div>
<div class="hidden-content" id="content-f">some content from F</div>

Answer 4

道歉，如果我误解了（jsfiddle，就像上面提到的adeneo一样，会非常有帮助），但似乎你只需要拨打fadeOut()致电fadeIn() }作为回调，沿着：

// try it out on http://jsfiddle.net/XyUps/1/

$(document).ready(function() {
    $("button").click(function() {
        $(".active").fadeOut(1000, function() {
            $(this).siblings("div").addClass("active").fadeIn();
            $(this).removeClass("active");
        });
    });
});

这里，fadeOut()中的第二个参数是回调，一个在动画完成时运行的函数：这是在jQuery中顺序制作动画的好方法（只需将它们放在后续行中就可以同时运行它们，这可能不是你想要的）。

一旦掌握了基本原则，您就可以使用animate()函数以相同的方式为更多/不同的属性制作动画（fadeOut是animate({display: 'none'}) 的简写等）。

在DIV内制作动画内容

4 个答案: