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

Question

我需要找到一种方法来更改/动画背景颜色。

如果我将后台脚本放在表单提交事件内部和 ajax 调用外部，我可以看到颜色短暂变化，但是当远程内容加载时它就会消失。显然是因为它运行得太快了。如果我放入 ajax 调用中，则什么也不会发生。

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

我编辑了这个答案，以便使其对于想要这样做的人来说更加通用和有用。

请记住，要使 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');
    });
});

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

我以前在一些方面走错了。对于我的代码（打开、单击），我需要在 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;
    });
});