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淡入淡出

回答

相关问题