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". And then I have an "X" near every "tag", so that the user can hide uninteresting "tags":

I would like to add a fade out effect to the both elements (the "tag" and the "X") - when the "X" has been clicked. 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. (This is a minor problem, because my real script is far from being quick :-) )
I only manage to fade out the clicked "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")

Please push the jQuery newbie in correct direction! Alex

回答1:

You can use .prev() to get the previous sibling, then .andSelf() to again include the X itself, like this:

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

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

回答2:

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. After the fadeout, the user is navigated to the original href.

回答3:

Because duration is first parameter of hide() you should use it like this :

hide(1000, 'explode');

来源：https://stackoverflow.com/questions/4517602/jquery-fading-out-2-elements-when-1-has-been-clicked

标签

javascript

jquery

fadeout