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

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，因爲我正在爲過時的瀏覽器版本設計此功能。雖然謝謝！ –

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

回答

相關問題