jQuery背景颜色动画切换 [英] jQuery background colour animate toggle

问题描述

我试图在单击时切换背景色的动画(以及slideToggle表单)，但是第一次单击时会隐藏元素(a#opt4)而不是更改颜色.我究竟做错了什么?

I'm trying to toggle animation of background colour on click (along with form slideToggle), but the first click hides the element (a#opt4) instead of changing the colour. What am I doing wrong?

注意:当我运行单个背景动画时，而不是切换时，它没有问题.不过，我想在用户再次单击链接时删除颜色.

note: when I'm running single background animate, instead of toggle, it works no problem. I want to remove the colour when user clicks on a link again, though.

$(document).ready(function() {

            $('#contact form').hide();

            $('a#opt4').click(function(e) {
                e.preventDefault();

                $('#contact form').slideToggle();

                $(this).toggle(function() {
                    $(this).animate({
                        backgroundColor: "#99ccff"},500);
                    },
                    function() {
                        $(this).animate({
                        backgroundColor: "none"},500);
                    });

            });
        });

推荐答案

您使用的是哪个jQuery版本?从jQuery 1.8开始，不推荐使用 .toggle() 和1.9

What jQuery version are you using? As of jQuery 1.8 .toggle() was deprecated, and 1.9 .toggle() was removed.

因此，人们不必对切换动画感到困惑. "http://api.jquery.com/toggle-event/" rel ="nofollow">切换事件.

Just so people aren't confused about the toggle animation as apposed to the toggle event.

注意:此方法签名已在jQuery 1.8中弃用并删除 在jQuery 1.9中. jQuery还提供了一种名为的动画方法 .toggle()可以切换元素的可见性.是否 动画或触发事件方法取决于参数集 通过.

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

如果您使用的是1.9或更高版本，则可以尝试编写自己的切换功能.当然，这种方法是基本的，可以在此基础上建立.

If you are using 1.9 or above you can try writing your own toggle functionality. Of course this method is basic and could be built upon.

$.fn.toggleState = function (even, odd) {
    this.toggled = this.data('toggled') || false;

    if (!toggled) {
        if (typeof even === 'function') {
            even(this);
        }
    } else {
        if (typeof odd === 'function') {
            odd(this);
        }
    }

    this.data({ toggled: !this.toggled });
};

可以像这样使用

$('a#opt4').click(function (e) {
    e.preventDefault();

    $(this).toggleState(function (el) {
        el.animate({
            backgroundColor: "#99ccff"
        }, 500);
    }, function (el) {
        el.animate({
            backgroundColor: "none"
        }, 500);
    });
});

$.fn.toggleState = function (even, odd) {
    this.toggled = this.data('toggled') || false;

    if (!this.toggled) {
        if (typeof even === 'function') {
            even(this);
        }
    } else {
        if (typeof odd === 'function') {
            odd(this);
        }
    }

    this.data({ toggled: !this.toggled });
};

在此 JSFiddle

请注意，您还可以使用jQueryUI设置背景颜色的动画.演示中使用的是什么.

Just a side note, you can also use jQueryUI to animate background color. Which is what's used in the demo.

这篇关于jQuery背景颜色动画切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！