1

こんにちは、ユーザーが特定のリンクをクリックしたときに、ページの下部からいくつかの div をアニメーション化しようとしています。

たとえば、「About」がクリックされたというリンクです。その div を下から特定の高さまでスライドさせる必要があります。しかし、「連絡先」などの別のリンクをクリックすると、連絡先のdivが下から上にスライドし、同時に他のdivが下にスライドする必要があります。私はjqueryの学習を始めましたが、あまり知識がありません..しかし、これは私が試したものです..しかし、意図した方法で取得できませんでした.

Div はクリックすると上にスライドしますが、他のリンクをクリックしても下にスライドしません。クリックした div のみを一度に表示する必要があり、残りのすべての div は下にスライドするか非表示にする必要があります

<script>
$(document).ready (function() {
    $('#ab').click (function() {
        $('#about').show().animate({marginTop:'-360px'});
    });
     $('#con').click (function() {
         $('#contact').show().animate({marginTop:'-360px'});

    });   
});
</script>

そしてここにCSSがあります

#about {width:auto; background-color:#333333; height:360px; position:relative; display:none;}
#contact {width:auto; background-color:#FF3300; height:360px; position:relative; display:none;}

ここに HTML が入ります

<ul class="menu">
<li><a id="ab" href="#">About </a></li> 
<li><a id="con" href="#">Contact</a></li> 

</ul>

<div class="maindiv">

<div id="about">About</div>
<div id="contact">Contact</div>
</div>

どんな助けでも大歓迎です..ありがとう

4

1 に答える 1

0

あなたはこれを行うことができます：

$('#ab').click(function (e) {
    e.preventDefault();
    $('#contact').slideUp();
    $('#about').slideDown();
});
$('#con').click(function (e) {
    e.preventDefault();
    $('#about').slideUp();
    $('#contact').slideDown();
});

フィドル

于 2013-04-26T19:24:49.700 に答える