[英]jQuery: fading out 2 elements, when 1 has been clicked
我有一个PHP / PostgreSQL / Oracle脚本,它将链接显示为“标签”,可以单击以仅显示与该“标签”匹配的数据库记录。 然后在每个“标签”附近都有一个“ X”,以便用户可以隐藏不感兴趣的“标签”:
我想为两个元素(“标记”和“ X”)添加淡入淡出效果-单击“ X”后。 所以我正在尝试:
<!DOCTYPE html>
<html>
<head>
<style>
a.hide {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.hide:hover {
background-color: #e7540c;
color: #E0EAF1;
border-bottom: 1px solid #A33B08;
border-right: 1px solid #A33B08;
text-decoration: none;
}
a.filter {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.filter:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
$('a.hide').click(function () {
$(this).fadeOut('fast');
});
});
</script>
</head>
<body>
<p>Please click on
<a class="filter" href="?filter=1">Tag 1</a><a
class="hide" href="?hide=1">X</a></p>
<p>Please click on
<a class="filter" href="?filter=2">Tag 2</a><a
class="hide" href="?hide=2">X</a></p>
</body>
</html>
但是我有两个问题:
请按正确的方向推动jQuery新手! 亚历克斯
您可以使用.prev()
获取上一个同级,然后使用.andSelf()
再次包含X
本身,如下所示:
$(document).ready(function () {
$('a.hide').click(function () {
$(this).prev().andSelf().fadeOut('fast');
});
});
如果您也想淡出“ Please click on ...”,请通过.closest()
爬上<p>
来淡出<p>
,如下所示:
$(document).ready(function () {
$('a.hide').click(function () {
$(this).closest('p').fadeOut('fast');
});
});
并且这种方式将解决看不到淡出的小问题...
$(document).ready(function () {
$('a.hide').each(function (i, anchor) {
var $anchor = $(anchor);
var oldHref = $anchor.attr('href');
$anchor.attr('href', '#');
$anchor.click(function(){
$anchor.prev().andSelf().fadeOut('fast', function(){
window.location.href = oldHref;
});
});
});
});
基本上,它会删除href并将其替换为#,以便在事件触发前不会进行导航。 淡出之后,用户将导航到原始href。
因为持续时间是hide()的第一个参数,所以您应该这样使用它:
hide(1000, 'explode');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.