3

要素をクリックするとサイズが大きくなり、もう一度クリックすると元のサイズに戻るような効果を作成しようとしています。何らかの理由で、JQueryのtoggleメソッドを使用していると、ページが読み込まれるときに要素（この例では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クリックイベントは1.8で非推奨になりました。そして最後にバージョン1.9で削除されました。

.toggle（function、function、...）が削除されました

これは、.toggle（）の「指定された関数を実行するための要素をクリックする」シグニチャです。非推奨ではない.toggle（）の「要素の可視性を変更する」と混同しないでください。前者は、混乱を減らし、ライブラリのモジュール性の可能性を高めるために削除されています。jQuery Migrateプラグインを使用して、機能を復元できます。

ご覧のとおり、バージョン1.8で動作します。

于 2013-02-27T01:43:19.817 に答える
3

このtoggle機能は、jQuery1.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()しているものはjQuery1.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 に答える