2

http://jsfiddle.net/fFs4B/

これは私を壁に追いやっています。divクリックしてコンテナのサイズに拡大し、縮小して元のサイズに戻します。そして、その最後の部分は、私に冒涜的な言葉を叫ばせます。ヘルプ？

var margLeft = '0%';
var margTop = '0%';

JS:

$(document).ready(function() {    
    $('.container div').click(function() {        
        if ($(this).hasClass('wide')) {
            margLeft = '0%';
            margTop = '0%';

            var clickedElem = $(this);
            clickedElem.removeClass('wide');
            deflateThis(clickedElem);
        }
        else {
            var clickedElem = $(this);
            inflateThis(clickedElem);
        }
    });
});

function inflateThis(clickedElem) {
    clickedElem.siblings().fadeOut(500, function() {   
        $('p').append(clickedElem.css('left'));
        if (clickedElem.css('left') !== '0%') {
            margLeft = '-50%';   
        }
        if (clickedElem.css('top') !== '0%') {
            margTop = '-50%';
        }
        clickedElem.animate({
            'left': '0',
            'top': '0',
            'width': '100%',
            'height': '100%'
        }, function() {
            clickedElem.addClass('wide');               
        });
    });   
}

function deflateThis(clickedElem) {
    if (margLeft == '0%') {
        margLeft = '0%';
    }
    else {
        margLeft = '50%';
    }
    if (margTop == '0%') {
        margTop = '0%';
    }
    else {
        margTop = '50%';
    }
    clickedElem.animate({
        'left': margLeft,
        'top': margTop,
        'width': '50%',
        'height': '50%'
    }, function() {
        clickedElem.siblings().fadeIn(500);       
    });   
}
4

2 に答える 2

1

この問題は、左と上のオフセット値を追跡することに関係しています。

これを修正する1つの方法は次のとおりです。

var margLeft = '';
var margTop = '';

$(document).ready(function() {    
    $('.container div').click(function() {        
        if ($(this).hasClass('wide')) {
            var clickedElem = $(this);
            clickedElem.removeClass('wide');
            deflateThis(clickedElem);
        }
        else {
            var clickedElem = $(this);
            inflateThis(clickedElem);
        }
    });
});

function inflateThis(clickedElem) {
    margLeft = clickedElem.css('left');
    margTop = clickedElem.css('top');
    clickedElem.siblings().fadeOut(500, function() {   
        clickedElem.animate({
            'left': '0px',
            'top': '0px',
            'width': '100%',
            'height': '100%'
        }, function() {
            clickedElem.addClass('wide');               
        });
    });   
}

function deflateThis(clickedElem) {
    clickedElem.animate({
        'left': margLeft,
        'top': margTop,
        'width': '50%',
        'height': '50%'
    }, function() {
        clickedElem.removeClass('wide'); 
        clickedElem.siblings().fadeIn(500);       
    });   
}

要素を膨張させるときは、左側と上部のオフセットをネイティブ ピクセル値に保存します。

収縮するときは、それらをグローバル変数から復元し、.wide収縮した要素からクラスを削除します。

デモを参照してください: http://jsfiddle.net/audetwebdesign/yhDjt/

コメント

カラー パネルのサイズと位置を に対して指定するつもりだったと思うので、CSS ルール.containerに追加しました。position: relative

于 2013-09-16T17:39:15.233 に答える
1

はるかに簡単な解決策:

http://jsfiddle.net/fFs4B/5/

$('.container div').click(function() { 
    $('.container div').toggleClass('hide'); //hides all divs
    $(this).toggleClass('hide'); //unhide this div
    $(this).toggleClass('wide'); //wide this div
});

スタイルは Css に残します。

于 2013-09-16T17:03:03.603 に答える