Question

我有一个PHP / PostgreSQL / Oracle脚本，它将链接显示为“标签”，可以单击该标签以仅显示与“标签”匹配的数据库记录。然后我在每个“标签”附近都有一个“X”，这样用户就可以隐藏不感兴趣的“标签”：

alt text

我想在两个元素（“标签”和“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>

但是我有两个问题：

当我的PHP脚本很快时，我根本看不到任何淡入淡出效果。（这是一个小问题，因为我的真实剧本远非快速： - ））
我只设法淡出点击的“X”。我怎样才能淡出左边的“标签”呢？（我不能在这里使用#id，因为我的真实脚本有数百个这样的“标签”）

请按正确的方向推jQuery新手！亚历

Answer 1

您可以使用.prev()获取上一个兄弟，然后.andSelf()再次包含X本身，如下所示：

$(document).ready(function () {
  $('a.hide').click(function () {
    $(this).prev().andSelf().fadeOut('fast');
  });
});

如果你想逐渐淡出“请点击......”，可以通过.closest()向下攀出<p>来淡出$(document).ready(function () { $('a.hide').click(function () { $(this).closest('p').fadeOut('fast'); }); });：

{{1}}

Answer 2

这种方式可以解决看不到淡出的小问题......

$(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。

Answer 3

因为持续时间是hide（）的第一个参数你应该像这样使用它：

hide(1000, 'explode');

jQuery：当点击1时淡出2个元素

3 个答案: