Question

I have a jquery animaton of divs that replace each others , it work good but when clicking on the black block( mydiv1) it doesnt return to its place why?

Check this link jquery_animation_divs

<script type="text/javascript">
    $(document).ready(function(){
        $('.nn').click(function(){
            var l = $(this).css('left');

            $(this).animate({
                left: '-=' + l
            }, 1500, "easeOutBounce", function(){
                // callBack
                $("#divmain").css("background-color", $(this).css("background-color"));
            });

            $('.ff').animate({
                left: '+=' + l
            }, 1500, "easeOutBounce", function () {
                // callBack
            });

            var ff = $('.ff');
            ff.removeClass('ff').addClass('nn');

            $(this).removeClass('nn').addClass('ff');
        });
    });
</script>

Answer 1

You are using .bind() (via .click()) which only applies to elements that match your selector at the time you run the event binding code. You want to use .delegate() or .live() so that the black block will be included in the set of matched elements.

Here is a jsfiddle of your exact code with .click( replaced by .live('click', : http://jsfiddle.net/Uv2GE/