Make it happen in a specific DIV
<p>I have a page with several <code>DIV</code> elements and each <code>DIV</code> contains two tables. One of them has <code>display:none</code> set and the other (let's call it the first table) has a dropdownlist (<code>DDL</code>). I'd like to <code>fadeIn()</code> for a short while the hidden table (over the first table) in the specified <code>DIV</code> where I changed the value of the DDL and then show the first table again:</p>

<pre><code>function ChangeValueInDropDownList(ddl) {
    var id = $(ddl).closest(".divClass").prop("id"); //from this I get the ID which DIV
    $("#" + id).toggle(function () {
        $(".hiddentable").fadeIn(500, function () {
            $(".hiddentable").hide(1000);
        });
    });
}
</code></pre>

<p>I have tried several solutions without any success. This is the last solution which hides the specified <code>DIV</code> completely. I dont know if it's possible to do something like this. Maybe I've gone too far in the wrong direction?</p>

<p>What I really want, is to accomplish that if I change the <code>DDL</code> in a specified <code>DIV</code>, that <code>DIV</code> is covered for 2 seconds with a text showing the user that <em>"the value for the <code>DDL</code> has been changed"</em>. </p>

<p>I created a link the make it more visible: <a href="http://jsfiddle.net/XHuDc/171/" rel="nofollow">http://jsfiddle.net/XHuDc/171/</a></p>
