4

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

我有一个带有不同数量图标的网页。当用户点击一个图标时，它应该在一个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和的 CSS .active：

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

如有必要，可以修改任何内容，但不能因为它们位于单独的包装器中。

谢谢。

4

4 回答 4

2

看看这个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( )来实现不同的动画效果。

我希望这有帮助！

于 2012-05-30T22:18:17.013 回答
0

add overflow:hidden，否则div将在您有机会制作动画之前捕捉以适应新内容的宽度/高度。

于 2012-05-30T22:08:09.453 回答
0

给你：http: //jsfiddle.net/huckepick/XtuX2/

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

更新：添加了对动画大小更改的支持

$('#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>

于 2012-05-30T22:21:41.227 回答
0

抱歉，如果我误解了（如上面提到的adeneo的 jsfiddle 会非常有帮助），但您似乎只需要fadeOut()调用 tofadeIn()作为回调，如下所示：

// 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'}) 等的简写）。

于 2012-05-30T22:29:32.377 回答