Question

我正在尝试创建一种效果，当您单击某个元素时，它的大小会增加，当再次单击该元素时，它会回到原始大小。出于某种原因，当我使用JQuery的切换方法时，它会导致元素（在此示例中为div）在页面加载时缩小。这是一个链接 JSFiddle我创建了：http://jsfiddle.net/6HNkF/这里是我的JavaScript：

    $(document).ready(function(){
        $('#mainImg').toggle(
            function(){
                $('#mainImg').animate({
                    width: '1000',
                    height: '1000'
                }, 500);
            },
            function(){
                $('#mainImg').animate({
                    width: '100',
                    height: '100'
                }, 500);
            }
        );
    });

Answer 1

toggle作为点击事件在1.8中已弃用。最后在版本1.9中删除。

<强> .toggle(function, function, ... ) removed

这是“单击运行指定函数的元素”.toggle（）的签名。它不应与.toggle（）的“更改元素的可见性”相混淆，而不是已弃用。前者被删除以减少混淆并提高库中模块化的可能性。 jQuery Migrate插件可用于恢复功能。

As you can see，适用于1.8版本。

Answer 2

jQuery 1.9+中不再提供toggle功能。您可以使用CSS过渡和类来方便地完成您要完成的任务：

<强> JS：

$(document).ready(function () {
    $('#mainImg').click(function () {
        $(this).toggleClass("wide");
    });
});

<强> CSS：

#mainImg{
    width:100px;
    height:100px;
    transition: all 0.5s;
}
#mainImg.wide{
    width:1000px;
    height:1000px;
}

您可以在此处找到演示：http://jsfiddle.net/WCwXm/

作为一般解决方案，您可以使用其他名称重新引入toggle方法的替代方法：

(function( $ ) {
$.fn.alternate = function() {
    var args = arguments,
        currIndex = 0;
    function toggler(e) {
        e.preventDefault();
        return args[(currIndex++) % args.length].apply(this);
    }
    return this.click(toggler);
};
})( jQuery );

您可以找到此here的演示。

Answer 3

您正在使用的.toggle()已在jQuery 1.9中删除。您可以包含jquery-migrate，它将这些旧方法添加回更新的jQuery版本中：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>

我不确定他们为什么要摆脱它。这是一种有用的方法。

Jquery .toggle（）导致元素在页面加载时淡出

3 个答案: