-1

3つのdivがあり、それぞれに複数の画像が含まれています。

このページには3つのボタンもあります。

各ボタンをクリックすると、対応するdivがフェードインし、他の2つのdivがフェードアウトするエフェクトを作成したいと思います。

以前に投稿された同様の効果のコードをフォローしようとしましたが、失敗しました。私よりもスキルの高い人からの助けを期待しています。ありがとう、ロス

HTMLは次のとおりです。

 <div id="GROUP-Join">
    <img class="CentreBox" src="images/CentreBox.png" 
        width="487" height="173">
    <img id="TitleOne" src="images/TitleOne.png" 
        width="339" height="19">
    <img id="TitleTwo" src="images/TitleTwo.png" 
        width="143" height="14">
    <body onLoad="focus();signup.email.focus()"></body>
    <form method="post" name="signup" action="signup.php">
        <input id="EmailAddress" type="text" name="email" 
            placeholder="e-mail" style="color: #000000; 
            font-family: 'Arial'; font-size: 20px; background-color:transparent;     
            border:hidden;" size="24" maxlength="49">
        <input id="Go" type="image" name="submit" src="images/Go.png" 
            alt="submit" value="GO">   
    </form>
 </div>
 <div id="GROUP-About">
    <img class="CentreBox" src="images/CentreBOX.png" 
        width="487" height="173">
    <img id="AboutHead" src="images/AboutHead.png" 
        width="132" height="19">
    <img id="JumpAround" src="images/JumpAround.png" 
        width="379" height="33">
    <img id="Win" src="images/Win.png" 
        width="254" height="15">    
 </div>
 <div id="GROUP-Contact">
    <img class="CentreBox" src="images/CentreBOX.png" 
        width="487" height="173">
    <img id="ContactHeading" src="images/ContactHead.png" 
        width="124" height="19">
    <img id="Email" src="images/e-mail.png" 
        width="24" height="17">
    <img id="Twitter" src="images/tw.png" 
        width="24" height="20">
    <img id="fb" src="images/fb.png" 
        width="10" height="21">    
 </div>
 <button id="button1">Join</button>
 <button id="button2">About</button>
 <button id="button3">Contact</button>
4

3 に答える 3

1

これがあなたの意図していることかどうかはわかりませんが、これは対応する各divでフェードインし、他の2つをフェードアウトします。

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn1').click(function () {
            $('#div1').fadeIn();
            $('#div2').fadeOut();
            $('#div3').fadeOut();
        });
        $('#btn2').click(function () {
            $('#div1').fadeOut();
            $('#div2').fadeIn();
            $('#div3').fadeOut();
        });
        $('#btn3').click(function () {
            $('#div1').fadeOut();
            $('#div2').fadeOut();
            $('#div3').fadeIn();
        });
    });
</script>

そしてマークアップ：

<div>
    <div id="div1">
        hello
    </div>
    <div id="div2">
        hello 2
    </div>
    <div id="div3">
        hello 3
    </div>
    <div>
        <input type="button" id="btn1" />
        <input type="button" id="btn2" />
        <input type="button" id="btn3" />
    </div>
</div>

jqueryfadeInとfadeOut関数にもコールバックがあるので、次のこともできます。

$('#div2').fadeOut(100, 
    function() { $('#div3').fadeOut(100, 
            function() { $('#div1').fadeIn(100); 
        });
    });
于 2012-09-12T16:09:05.430 に答える
0

このフィドルを確認してください

このスクリプトはあなたのために仕事を終わらせるはずです

$(function(){

    $('button').on('click', function() {
        var btnText = $(this).text();

        $('div').fadeOut('slow');
        $('#GROUP-'+btnText).fadeIn('slow');
    });
});​
于 2012-09-12T16:07:43.940 に答える
0

フェードインなどのjQueryでエフェクトを実行する場合、そのエフェクトが完了したらアクションを実行できるようにコールバックを提供できます。たとえば、あなたの場合：

$('#button1').click(function() {
  $('#GROUP-Contact').fadeOut(500);
  $('#GROUP-About').fadeOut(500, function() {
    $('#GROUP-Join').fadeIn(500);
  });
});

これは、JSコードを見ずにあなたが探しているものの私の最良の推測です。

于 2012-09-12T16:08:15.973 に答える