調整大小上點擊返回原來的位置

Question

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

Answer 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規則。

Answer 2

更簡單的解決：

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。