DIV內的動畫內容

Question

好的，這有點難以解釋，因此有點難以搜索，所以請原諒我，如果它之前被問過。我會詳細解釋。

我有一個不同數量的圖標的網頁。當用戶點擊一個圖標時，它應該在DIV內顯示與該圖標相關的內容。這是棘手的地方。無論用戶點擊哪個圖標，內容都應該加載到相同的DIV。但是，一次只能顯示一個圖標的內容。因此，如果加載了「A」的內容，並且用戶點擊「B」，則「A」的內容應該淡出並且被內容「B」淡入，與「C」，「D」 「等（可能最多約5個）。內容的大小可能差異很大，因此包含內容的DIV需要對其高度進行動畫處理以適應當前內容。

我被卡住的地方是動畫。我已經想出瞭如何基於用戶點擊的位置在不同的內容部分設置display: none;「和display: 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");  
    }); 
}); 

CSS爲.hidden和.active：

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

你也可以用slideUp()和slideDown()更換fadeOut()和fadeIn()分別實現不同的動畫效果。

我希望這有助於！

Answer 2

add overflow:hidden，否則div會捕捉以適應新的內容寬度/高度，然後您有機會做動畫。

Answer 3

在這裏你去：http://jsfiddle.net/huckepick/XtuX2/

這不是很花哨呢。但它很簡單，易於理解和易於擴展。

UPDATE：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"); 
     }); 
    }); 
}); 

這裏，​​中的第二個參數是回調函數，它是動畫完成時運行的函數：這​​是在jQuery中使動畫順序化的一種好方法（只要將它們放在後續行上就可以同時運行它們，這可能不是你想要什麼）。

一旦你掌握了基本原理，你可以使用animate()功能（fadeOut是短手animate({display: 'none'})等）動畫以同樣的方式更多/不同的屬性。