这让我感到困惑。我希望点击的任何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);
});
}
答案 0 :(得分:1)
更简单的解决方案:
$('.container div').click(function() {
$('.container div').toggleClass('hide'); //hides all divs
$(this).toggleClass('hide'); //unhide this div
$(this).toggleClass('wide'); //wide this div
});
将样式保留在Css中。
答案 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/
<强>注释强>
我认为您的颜色面板的大小和位置与.container
相关,因此我将position: relative
添加到了CSS规则中。