使用jQuery动画更改背景颜色？

Question

我有一个允许用户投票的脚本。我试图通过合并父div的背景颜色动画使其更具动态性。主脚本工作得很好，但是在ajax调用之后我无法找到改变/动画背景颜色的方法。

如果我将后台脚本放在表单提交事件中并且在ajax调用之外，我可以简单地看到颜色更改，但是当远程内容加载时它会消失。显然是因为它运行得太快了。如果我在ajax调用内部发生任何事情都没有发生。 “con”var是我想要改变的对象。

我主要是使用$(con).css("background", "green");进行测试，但是一旦我实际上正常运行，那就是我希望它能够像ajax .load一样淡入淡出。

$(function() {

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

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

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

            $.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

我编辑了这个答案，以使其对于那些希望这样做的人来说更具普遍性和实用性。

请记住，要使animate功能起作用，您需要jQuery UI库。

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

使用固定颜色的基本示例：

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');
    });
});

与动态颜色一起使用的基本示例（颜色选择器）：

<强> 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');
    });
});

我是如何根据上述问题做到的：

我之前遇到过一些错误。对于我的代码（on，click），我需要等待并在AJAX调用完成后提交表单。此外，我只是更新了成功回调中更改的内容，而不是重新加载html。

$(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;
    });
});