1

アニメーション/フェードを表示/非表示スクリプトに追加しようとしています。

ユーザーが「.show」アンカーをクリックしたら、「。buttons」divを「.targetDiv」divの高さだけ下にスライドさせます。その後、「。targetDiv」divをフェードインします。

次に（可能であれば）、「。hide」アンカーがクリックされたときに逆のアクションが発生するようにします。これにより、「。targetDiv」がフェードアウトし、「。buttons」divが上にスライドします（元の位置に戻ります）。 ）。

ご協力ありがとうございました！

jsFiddle：

http://jsfiddle.net/XwN2L/1296/

HTML：

    <div id="content" class="targetDiv">Content</div>
    <div class="buttons">
        <a  class="show" target="content">Show</a>
        <a  class="hide" target="content" style="float: right;">Hide</a>
    </div>

JavaScript：

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#' + $(this).attr('target')).show();
    });

    $('.hide').click(function () {
        $('#' + $(this).attr('target')).hide();
    });
4

3 に答える 3

1

jqueryのslideUp/slideDownメソッドを使用するだけです。

$('.targetDiv').hide();
$('.show').click(function () {
    $('.targetDiv').hide();
    $('#' + $(this).attr('target')).slideDown('slow');
});

$('.hide').click(function () {
    $('#' + $(this).attr('target')).slideUp('slow');
});

スライドしてフェードする必要がある場合は、以下を確認してください。

同時にfadeOut（）とslideUp（）？

于 2013-01-19T22:48:04.137 に答える
0

ターゲット要素が別の要素内にネストされていると、簡単に実行できます。このようにして、スライドアニメーションを含む親要素に個別に適用し、フェードアニメーションをターゲットの子要素に個別に適用できます。

例えば：

HTML

<div id="content_container">
    <div id="content" class="targetDiv">Content</div>
</div>

<div class="buttons">
    <a  class="show" target="content">Show</a>
    <a  class="hide" target="content" style="float: right;">Hide</a>
</div>

Javascript

$('.show').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent().height(target.outerHeight());
    target_parent.slideDown(250, function() { target.fadeIn(500); });
});

$('.hide').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent();
    target.fadeOut(500, function() {target_parent.slideUp(500);} );
});

「show」ハンドラーで、親要素が現在非表示になっている子要素から高さを継承する方法に注意してください。

可能なjsFiddleデモを見る

于 2013-01-19T22:54:21.360 に答える
-1

1つのオプション：

要素に絶対的な位置を与える：

position: absolute;
top:0px;

次に、次のようにアニメーション化します。

$('.show').click(function () {
        $('.targetDiv').hide();
        $('.buttons').animate({
            top : '80px' // the height of your content + the padding + the margins
        },'slow',function(){
            $('#content').fadeIn('slow');
        });
});


$('.hide').click(function () {
    $('#content').fadeOut('slow',function(){
        $('.buttons').animate({
            top : '0px' // the height of your content + the padding + the margins
        });
    });
});

実例： http： //jsfiddle.net/XwN2L/1298/

于 2013-01-19T22:46:54.730 に答える