Change background color dynamically with animation using jQuery?

Question

I need to find a way to change/animate the background color.

If I put the background script inside the form submit event and outside the ajax call, I can see the color change briefly, but when the remote content loads it disappears. Apparently because it is running too soon. If I put in inside the ajax call nothing ever happens.

$(function() {

    $(document).on("click", ".vote_button", function(event){

        var form = $(this).parent();
        var page = <?php echo json_encode($page) ?>;
        var target = $('.target');

        $(form).submit(function (event) {
            event.preventDefault();

            $(target).animate({
              backgroundColor: "#ccc"
            }, 'fast' );
            $(target).animate({
              backgroundColor: "#fff"
            }, 'slow' );

            $.ajax({
            type: "POST",
            url: "/forms/increase_rank.php",
            data: $(form).serialize(),
            success: function(response){

                $(function() {
                    getdata( page ); /* call the function onload */
                });

                function getdata(pageno){
                    var targetURL = 'search_results?page=' + pageno;   

                    $('#retrieved-data')
                    .html('<p id="ajax-load">testing</p>');        
                    $('#retrieved-data')
                    .load(targetURL)
                    .hide()
                    .fadeIn(1000);

                }

                $(form).html(response);

            }

            });
        });
    });
});

Answer 1

I've edited this answer in order to make it more universal and useful for someone looking to do this.

Keep in mind that for the animate function to work, you need the jQuery UI library.

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

A basic example for use with a fixed color:

HTML:

<div class="target">Change this background!</div>
<button>Change Background</button>

jQuery:

$(function() {
    $("button").on('click', function () {
        var $target = $('.target');

        $($target).animate({
            backgroundColor: "#4679BD"
        }, 'fast');
    });
});

A basic example for use with dynamic colors (color-picker):

JSFiddle

HTML:

<ul>
    <li class="black"></li>
    <li class="blue"></li>
    <li class="green"></li>
    <li class="purple"></li>
</ul>
<div class="target">This is some sample text.</div>

CSS:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
}
.black {
    background-color: black;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
.purple {
    background-color: purple;
}
.target {
    margin-top: 50px;
    padding: 10px;
    background-color: #808080;
    color: #fff;
}

jQuery:

$(function () {
    $('li').on('click', function () {
        var $color = $(this).css('background-color');

        $('.target').animate({
            backgroundColor: $color
        }, 'slow');
    });
});

How I did it based on the question above:

I was going wrong a few ways before. For my code (on, click), I needed to wait and submit the form after the AJAX call was complete. Also, rather than load the html all over again, I simply updated the content that changed inside the success callback.

$(function() {
    $( ".vote_button" ).on('click', function(event) {
        var form = $(this).parent();
        var target = $('.target');
        var voteCount = $(this).siblings('#vote_count');

        $(target).animate({
           backgroundColor: "#ccc"
        }, 'fast' );
        $(target).animate({
           backgroundColor: "#fff"
        }, 'slow' );

        $.ajax({
            url: "/forms/vote.php",
            type: 'POST',
            data: $(form).serialize(),
            success: function(data) {
                $(voteCount).html(data);
            }
            }).done(function() {
                $(form).submit(function(event) {
                });
            });
        return false;
    });
});