Multiple Div淡入淡出

-1

我有三個div，每個包含多個圖像。Multiple Div淡入淡出

頁面上還有三個按鈕。

我想創建一個效果，在每個按鈕上單擊淡入相應的div並淡出其他兩個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>

來源

2012-09-12 Ross Lilley

我看到了一些標記，但沒有實際的代碼，你已經嘗試過了。 – Loktar

...在這裏沒有問題，再次... – feeela

我不確定這是你的意思，但是這會在每個對應的div中淡出並淡出另外兩個。

<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>

jQuery的fadeIn和fadeOut功能也都有回調，所以你也可以這樣做：

$('#div2').fadeOut(100, 
    function() { $('#div3').fadeOut(100, 
      function() { $('#div1').fadeIn(100); 
     }); 
    });

來源

2012-09-12 16:09:05

謝謝戴夫，效果很棒！ –

嗨戴夫，我已經注意到，在IE中，當切換每個按鈕時，當它返回到加入頁面時，不再可能選擇電子郵件地址輸入框。有什麼辦法可以解決這個問題嗎？ –

什麼版本的IE？我在7,8和9中嘗試過，它在所有3中都能正常工作。另外 - 爲什麼你的GROUP-Join div中間有一個body標籤？您的標記中只應包含1個身體標記，並且圍繞着您的內容。 –

入住這FIDDLE

這個腳本應該得到的工作做了你

$(function(){ 

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

     $('div').fadeOut('slow'); 
     $('#GROUP-'+btnText).fadeIn('slow'); 
    }); 
});

來源

2012-09-12 16:07:43

謝謝sushanth，這是出色的工作，唯一的問題是，它使頁面上的其餘內容消失。有沒有辦法阻止這種情況發生？ –

你在說什麼內容？ –

當您運行在jQuery的諸如淡入的效果，你可以提供一個回調，這樣就可以一旦該效果完成，就執行操作。例如，在你的情況下：

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

這是我最好的猜測你在找什麼，而沒有看到任何JS代碼。

來源

2012-09-12 16:08:15

Multiple Div淡入淡出

回答

相關問題