Run jQuery function immediately after an animate
<p>im using the following JSfiddle: <a href="http://jsfiddle.net/edddotcom/7NQKU/1/" rel="nofollow">http://jsfiddle.net/edddotcom/7NQKU/1/</a></p>

<p>I'm using a callback function to change the background of the text immediately after the image is clicked,</p>

<p>The  is the sibling of the  so i was hoping i could just use .sibling() but it doesnt work, what am i doing wrong?</p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
     &lt;img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg" height="100%"&gt;
         &lt;span&gt;TEXT HERE TEXT HERE TEXT HERE &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.container {
    display: block;
    width: 900px;
    height: 116px;
    background-color: red;
}
span {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
}
img {
    float: left;
    height:100%;
    max-width: 400px;
    min-width: 200px;
}
</code></pre>

<p>JavaScript:</p>

<pre><code>$(document).ready(function() {
    //ON CLICK
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "232px"
        },function(){
            $(this).sibling().css("background-color","yellow");
        });

    }, function () { // fired the second time 
        $(this).parent().animate({
            //SECONDCLICKCOMMAND
            height: "116px"
        },function(){
            $(this).sibling().css("background-color","white");
        });

    });

});
</code></pre>

<p>removing the .sibling() part makes the  background change which also confused me.
How can i make it so only the text background changes?</p>
