jQuery：单击1时淡出2个元素
[英]jQuery: fading out 2 elements, when 1 has been clicked
问题描述
I have a PHP/PostgreSQL/Oracle-script which displays links as "tags", which can be clicked to display only the database records matching that "tag". 
我有一个PHP / PostgreSQL / Oracle脚本，它将链接显示为“标签”，可以单击以仅显示与该“标签”匹配的数据库记录。 And then I have an "X" near every "tag", so that the user can hide uninteresting "tags": 然后在每个“标签”附近都有一个“ X”，以便用户可以隐藏不感兴趣的“标签”：
I would like to add a fade out effect to the both elements (the "tag" and the "X") - when the "X" has been clicked. 我想为两个元素（“标记”和“ X”）添加淡入淡出效果-单击“ X”后。 So I am trying: 所以我正在尝试：
<!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>
However I have 2 problems: 但是我有两个问题：
- When my PHP-script is quick, then I don't see any fade effect at all. 如果我的PHP脚本很快，那么我根本看不到任何褪色效果。 (This is a minor problem, because my real script is far from being quick :-) ) （这是一个小问题，因为我的真实脚本远远不够快速：-） ）
- I only manage to fade out the clicked "X". 我只能淡出单击的“ X”。 How can I fade out the "tag" on the left from it? 如何淡出左侧的“标签”？ (And I can't use #id here, because my real script has hundreds of such "tags") （而且我在这里不能使用#id，因为我的真实脚本中有数百个这样的“标签”）
Please push the jQuery newbie in correct direction! 请按正确的方向推动jQuery新手！ Alex 亚历克斯
3 个解决方案
解决方案1
2 已采纳 2010-12-23 09:55:07
You can use .prev() to get the previous sibling, then .andSelf() to again include the X itself, like this: 您可以使用.prev()获取上一个同级，然后使用.andSelf()再次包含X本身，如下所示：
$(document).ready(function () {
$('a.hide').click(function () {
$(this).prev().andSelf().fadeOut('fast');
});
});
If you want to fade out the "Please click on..." as well, fade out the <p> by climbing up to it with .closest() like this: 如果您也想淡出“ Please click on ...”，请通过.closest()爬上<p>来淡出<p> ，如下所示：
$(document).ready(function () {
$('a.hide').click(function () {
$(this).closest('p').fadeOut('fast');
});
});
解决方案2
1 2010-12-23 10:08:43
And this way will fix the minor problem of not seeing the fadeout... 并且这种方式将解决看不到淡出的小问题...
$(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;
});
});
});
});
Basically, it removes the href and replaces it with a # so it won't navigate before the event is fired. 基本上，它会删除href并将其替换为＃，以便在事件触发前不会进行导航。 After the fadeout, the user is navigated to the original href. 淡出之后，用户将导航到原始href。
解决方案3
0 2010-12-23 10:09:45
因为持续时间是hide（）的第一个参数，所以您应该这样使用它：
hide(1000, 'explode');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.