3

我正在尝试创建一种效果，当您单击一个元素时，它的大小会增加，而当再次单击它时，它会恢复到原始大小。出于某种原因，当我使用 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);
            }
        );
    });
4

3 回答 3

3

toggle因为 click 事件在 1.8 中已被弃用。最后在 1.9 版中删除。

.toggle(function, function, ... ) 已移除

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

如您所见，它适用于 1.8 版。

于 2013-02-27T01:43:19.817 回答
3

该toggle功能在 jQuery 1.9+ 中不再可用。你想要完成的事情可以通过 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 );

你可以在这里找到一个演示。

于 2013-02-27T01:47:11.077 回答
1

您正在使用的.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>

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

于 2013-02-27T01:45:00.707 回答