jQuery slideDown & show
jQuery slideDown & show
提问于 2017-02-06 16:48:02
我是编写jQuery代码的初学者。我想编写一个简单的滑雪板。我可以滑到下一张图片。但是..。我怎么才能滑回去？如果/否则呢？
事实：
$(document).ready(function() {
$("#button").click(function() {
$("#whiteLayer").slideDown("slow").delay(700).slideUp(400);
$("#imageOne").delay(700).fadeOut();
$("#imageTwo").delay(701).show();
});
})我还有一个关于codepen的例子：http://codepen.io/huberloui/pen/WRKwjw
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-09 16:14:30
考虑到您的代码片段，序列可能如下所示：
- 从
data-target获取目标图像的选择器 - 滑下白色的层
- 隐藏所有图像(重置)，但显示目标图像
- 再一次滑上白色的一层
下面是带有日志记录和代码中更多注释的更新片段。确保还检查了HTML (ID不需要额外的# )。
jQuery(document).ready(function($) {
$('#nav a').click(function() {
var targetID = $(this).data('target'); // Select target image.
$('#whiteLayer').slideDown('slow', function() {
console.log('slideDown finished');
$('#imageOne, #imageTwo').hide(); // Hide all images.
$(targetID).show(); // Show targeted image.
console.log('show ' + targetID);
}).slideUp(400, function() {
console.log('slideUp finished');
});
});
});body {
font-family: sans-serif;
padding: 0;
overflow: hidden;
}
.headerimage {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#nav {
margin-right: 100px;
margin-top: 20px;
}
#nav li {
display: inline;
float: right;
position: relative;
margin-left: 20px;
}
#nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
#whiteLayer {
position: absolute;
left: 0;
top: 0;
z-index: 5;
width: 100%;
height: 100%;
display: none;
background-color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="whiteLayer"></div>
<img id="imageOne" class="headerimage" src="https://unsplash.it/600/200?image=29">
<img id="imageTwo" class="headerimage" src="https://unsplash.it/600/200?image=30" />
<ul id="nav">
<li><a href="#" data-target="#imageOne">Test1</a>
</li>
<li><a href="#" data-target="#imageTwo">Test2</a>
</li>
</ul>
</body>
Stack Overflow用户
发布于 2017-02-06 17:16:08
将属性data-toggle添加到带有img id的标记<a>中
例如：
<li><a href="#" data-target="#imageOne">Test1</a></li>
在javascript/jQuery上，按事件获取触发器元素：$(Document).ready(函数(事件)){
$("#button").click(function() {
var id = $(event.target).prop('data-target'); // event.target is the trigger element
$("#whiteLayer").slideDown("slow").delay(700).slideUp(400);
$(id).delay(700).fadeOut();
$(id).delay(701).show();( })
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42073016
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号