Div應該來中心onclick

Question

我不完美的jquery，有我的代碼中的問題。在這段代碼中，我有4個div修復高度和寬度。問題是，當我點擊任何div，點擊div應該在中心（水平和垂直）。

這裏是我的代碼>http://jsfiddle.net/THE_j/02asmj4w/1/

$(document).ready(function(){ 

    $('.col').click(function(){ 
     var windowWidth = $(window).width(); 
     var windowHeight = $(window).height(); 
     var divWidth = $(".col").width(); 
     var divHeight = $(".col").width(); 
     var test=(windowWidth-divWidth)/2; 
     var marginLeft = $(this).css({"margin-left":(windowWidth-divWidth)/2}); 
     var margintop = $(this).css({"margin-top":(windowHeight-divHeight)/2}); 

     $(this).animate({ 
      width : '250px', 
      height:'250px', 
     }); 

    }); 
}); 

Answer 1

的問題是在這些線路：

var divWidth = $(".col").width(); 
var divHeight = $(".col").width(); 

你有元素的默認值100（並且，順便說一下，你用.width()用於獲取高度）而不是250，哪個元素在動畫之後有效。

您可以簡單地設置這兩個變量250：

var divWidth = 250; 
var divHeight = 250; 

更新。也爲正確定心，你可以隱藏所有其他div S：

$('.col').not(this).hide(); 

或設置position元素來absolute。

$(this).css("position", "absolute"); 

Updated fiddle。

當然，對於250使用常量（變量）會更好，而不僅僅是在代碼中具有多個魔術250值。

Answer 2

完全重做了解決方案：http://jsfiddle.net/02asmj4w/15/ 爲什麼？因爲我有一些在清晨擺弄迫切需要...

什麼呢我的解決方法做： - 它的水平和垂直居中點擊框視口內部

• 如果另一箱變點擊後，目前中心的盒子回到其初始位置

• 如果居中框被點擊，它可以追溯到其初始位置

• 四個初始升盒子留在頁面

• 的頂部沒有更多的跳動動畫由於您最初使用的浮動...

我做了什麼： - 每一個div的現在有另外一個id去上課。

• 類CSS看起來如下

  。col {height：100px; height：100px; width：100px; float：left; margin-left：10px; margin-top：5px; position：absolute; top：0px; }

• 的ID CSS只是設置每個div的左側位置，並設置一些不同的背景顏色，以更好地區分箱

  DIV3 {

  left: 220px; 
  background: #cde; 
  

  }

好的...那只是造型thingies，這裏沒什麼特別的... 現在爲js：

var leftOffset; //declare a global variable leftOffset for later usage 

$('.col').click(function() {    // on click 
    if (!$(this).hasClass("clicked")) { // if clicked div is not the centered one 
     // get viewport dimensions and set needed margins 
     var currentViewPortWidth = $(window).width(); 
     var currentViewPortHeight = $(window).height(); 
     var marginLR = (currentViewPortWidth - 250)/2; 
     var marginTB = (currentViewPortHeight - 250)/2; 
     leftOffset = $(this).css("left"); // store clicked div left offset in global var 

     $(".clicked").animate({   // define the 'go back to initial pos' animation 
      width: '100px', 
      height: '100px', 
      left: leftOffset, 
      marginLeft: '10px', 
      marginTop: '5px' 
     }).removeClass("clicked");   // remove 'clicked' class handler 

     $(this).animate({     // define 'clicked div go to center' animation 
      width: '250px', 
      height: '250px', 
      left: '0px', 
      marginLeft: marginLR, 
      marginTop: marginTB 
     }).addClass("clicked");   // set clicked class handler 


    } else {        // else means: clicked div is the centered one 
     $(this).animate({     // define the 'go back to initial pos' animation 
      width: '100px', 
      height: '100px',    
      left: leftOffset, 
      marginLeft: '10px', 
      marginTop: '5px' 
     }).removeClass("clicked"); 
    } 
}); 

// ensure, that the div stays centered on window resize 
$(window).resize(function() { 
    var currentViewPortWidth = $(window).width(); 
    var currentViewPortHeight = $(window).height(); 
    var marginLR = (currentViewPortWidth - 250)/2; 
    var marginTB = (currentViewPortHeight - 250)/2; 
    $('.clicked').css({"margin-left": marginLR, "margin-top": marginTB}); 
});