Javascript 单击时调整大小并返回到原始位置

这真让我抓狂。我想要单击任何

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);       
    });   
}

更简单的解决方案：

---

将样式保留在Css中。

问题与跟踪左侧和顶部偏移值有关

这里有一种解决方法：

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

类

请参见演示：

评论

---

我认为您的意思是颜色面板的大小和位置与

.container

有关，因此，我在CSS规则中添加了

position:relative

。

尝试通过

data-

属性或类来跟踪原始位置，这样您就知道是否应该将位置改为下/右相对于上/左。当您获取当前的“left”或“top”值时，它们是以像素而不是百分比来报告的。但这并不是我想要的效果！我知道这在CSS3中是多么容易和简单，但我希望元素首先消失，我当然不想使用CSS3，因为我是专门为过时的浏览器版本设计的。谢谢你！

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);       
    });   
}