调整大小上点击返回原来的位置

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

来源

2013-09-16 Nick Bull

尝试通过'data-'属性或类来保持原始位置的标签，以便知道是否应该重新定位到底部/右侧与顶部/左侧。 –

当您获取当前的“左”或“顶”值时，它们以像素而不是百分比报告。 – Pointy

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

这里是修复它的一种方式：

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规则。

来源

2013-09-16 17:39:15

更简单的解决：

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-16 17:03:03 rafaelcastrocouto

更简单:) – Bigood

但不是我想要的效果！我知道这是CSS3中的简单和简单，但我希望首先将元素放在DISAPPEAR中，而我当然不想使用CSS3，因为我正在为过时的浏览器版本设计此功能。虽然谢谢！ –

调整大小上点击返回原来的位置

回答

相关问题