单击时调整大小并返回到原始位置
Resizing on click and returning to original position
>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);
});
}
问题与跟踪左侧和顶部偏移值有关。
这是修复它的一种方法:
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
,所以我在 CSS 规则中添加了position: relative
。
更简单的解决方案:
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 中。
相关文章:
- 遍历JS对象/数组,如果找到匹配项,则更改值并返回原始对象/数组结构
- CSS和PHP运行exec并返回原始页面
- 单击将 img 更改为新的 img 并返回原始图像
- 如何在 Gulp useref 中返回原始路径
- JS 替换返回原始字符串
- JavaScript - 使用包含异步回调但仍返回原始值的函数覆盖函数
- 将箭头返回原始位置
- Jquery replaceWith并返回原始
- 修改函数内部的JavaScript对象,如果出现错误,则返回原始对象
- 使用tab键更改焦点颜色的按钮,并在按enter键时返回原始颜色
- 属性返回原始值,而不是通过方法调用更新的值
- AngularJS:如何在指令中返回原始元素和新的同级元素
- Javascript:在点击时更改图像,然后再次点击时返回原始图像
- 当使用后退按钮时,Rails 3.1将返回原始Javascript代码
- “back"按钮转到目的地,然后返回原始页面
- 为什么隐藏输入元素的.attr('value')没有从html字符串返回原始值
- 全局对象返回原始值,即使它已被替换
- Jquery AJAX返回原始数据或准备使用的HTML
- 与返回原始 html 相比,json 是否会增加任何开销
- CSS - 悬停移动图像时,稍稍向左,如果未悬停则返回原始位置