4

わかりました、これは説明するのが少し難しいため、検索するのが少し難しいので、以前に尋ねられた場合はご容赦ください. 丁寧に説明していきます。

さまざまな数のアイコンを含む Web ページがあります。ユーザーがアイコンをクリックすると、そのアイコンに関連するコンテンツが 内に表示されますDIV。ここがややこしいところです。ユーザーがどのアイコンをクリックしても、コンテンツは同じDIV. ただし、一度に表示できるのは 1 つのアイコンのコンテンツだけです。したがって、「A」のコンテンツがロードされ、ユーザーが「B」をクリックすると、「A」のコンテンツがフェードアウトし、「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');
    });
});

また、異なるアニメーション効果を実現するために、fadeOut() と fadeIn() をそれぞれslideUp ()とslideDown ( )に置き換えることもできます。

これが役立つことを願っています！

于 2012-05-30T22:18:17.013 に答える
0

誤解してしまった場合はお詫びします（前述のadeneoのようにjsfiddleは非常に役立ちます）が、コールバックとしてtoを呼び出して、次のように呼び出す必要があるようです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");
        });
    });
});

ここで、の2番目の引数fadeOut()はコールバックです。これは、アニメーションが完了したときに実行する関数です。これは、jQueryでアニメーションをシーケンシャルにするための優れた方法です（後続の行にアニメーションを配置するだけで同時に実行されますが、これはおそらく望ましいことではありません。 ）。

基本原則をマスターしたら、animate()関数を使用して同じ方法でより多くの/異なるプロパティをアニメーション化できます（などfadeOutの省略形です）。animate({display: 'none'})

于 2012-05-30T22:29:32.377 に答える
0

そう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 に答える