jquery animate with changing multiple class name doesnt work
<p>Could someone please have a look at this and tell me what I'm doing wrong. It's a span with class move.up on click the <code>.content-wrapper</code> element will move and the <code>.move.up</code> wil change class name to <code>.move.dwn</code> 
later the <code>move.dwn.click(function()</code> should start but I can never make it to that point, why?</p>

<pre><code> &lt;style type="text/css"&gt;
    .content-wrapper {
        height:100px;
        width:100px;
        background-color:orange;
        position:relative;
    }
    span.move {
        background-color:fuchsia;
        cursor:pointer;
    }
&lt;/style&gt;

&lt;span class="move up"&gt;click here&lt;/span&gt;
&lt;div class="content-wrapper"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function() {

        $('.move.up').click(function() {
            alert("up");
            $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
            $(this).removeClass('up');
            $(this).addClass('dwn');
        });

        $('.move.dwn').click(function() {
            alert("dwn");
            $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
            $(this).removeClass('dwn');
            $(this).addClass('up');
        });
    });

&lt;/script&gt;
</code></pre>
