多重潜水淡入淡出打开
Multiple Div Fade In/Out On
我有三个div,每个div包含多个图像。
页面上还有三个按钮。
我想创建一个效果,点击每个按钮会在相应的div中淡出,并淡出其他两个div。
我曾试图遵循之前发布的代码来获得类似的效果,但没有成功,我希望那些比我更有技巧的人能给我一些帮助!谢谢,Ross
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>
我不确定这是你的意思,但这会在每个相应的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);
});
});
检查此FIDDLE
这个脚本应该为你完成的工作
$(function(){
$('button').on('click', function() {
var btnText = $(this).text();
$('div').fadeOut('slow');
$('#GROUP-'+btnText).fadeIn('slow');
});
});
当您在jQuery中运行效果(如fadeIn)时,您可以提供回调,以便在效果完成后执行操作。例如,在您的案例中:
$('#button1').click(function() {
$('#GROUP-Contact').fadeOut(500);
$('#GROUP-About').fadeOut(500, function() {
$('#GROUP-Join').fadeIn(500);
});
});
这是我在没有看到任何JS代码的情况下对您正在寻找的内容的最佳猜测。
相关文章:
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 使用jquery淡入淡出
- 淡入淡出脚本不起作用
- 具有淡入淡出效果的全背景图像
- 纯 JavaScript 淡入淡出 - 淡入不起作用
- 帧淡出/淡入
- 如何在onClick事件中使用ReactJS淡出/淡入内容
- 淡出 ->淡入无法正常工作
- JQuery 淡出/淡入以创建排序列表
- 无法让元素淡出/淡入
- 正在添加'淡出/淡入'响应媒体查询
- jQuery:具有淡入和淡出(淡入)的图像
- Div won't淡出/淡入
- 淡出/淡入和上卷jquery效果
- 如何根据 SELECT 更改淡出/淡入视图