2015-10-16 212 views
0

我正在我的第一個嚴肅的網站工作,我被困在這個問題上。首先我認爲我的JQuery極其笨拙,可能已經以更高效的方式完成了,會喜歡一些關於如何更好地編寫代碼的幫助(Feks,我可能用於許多函數)。

重要的是我需要一些動畫幫助。我希望divs在它們打開之前在容器的左側離開容器。現在的方式看起來很不自然。Jquery動畫/功能幫助需要

我將不勝感激任何幫助。

http://jsfiddle.net/Skaadel/nt8a29gm/1/

HTML

<div class="container"> 
    <div class="row"> 
     <div class="test1 col-sm-3"> 
      <div id="boks1">About Me</div> 
     </div> 
     <div class="test2 col-sm-3"> 
      <div id="boks2">Portfolio</div> 
     </div> 
     <div class="test3 col-sm-3"> 
      <div id="boks3">Project</div> 
     </div> 
     <div class="test4 col-sm-3"> 
      <div id="boks4">TEST</div> 
     </div> 
    </div> 
</div> 

CSS

html { 
    width: 100%; 
} 
#test { 
    background-color: blue; 
    height: 400px; 
    width: 400px; 
    margin: auto; 
} 
#wrapper { 
    height: 500px; 
} 
.container { 
    background-color: black!important; 
    margin-bottom: 40px!important; 
} 
#boks1 { 
    height: 400px; 
    width: 100px; 
    background-color: red; 
    position: relative; 
    z-index: 15; 
} 
#boks2 { 
    height: 400px; 
    width: 100px; 
    background-color: blue; 
} 
#boks3 { 
    height: 400px; 
    width: 100px; 
    background-color: white; 
} 
#boks4 { 
    height: 400px; 
    width: 100px; 
    background-color: pink; 
} 

JQUERY

$(document).ready(function() { 
    $("#boks1").click(function() { 
     if ($("#boks1").width() == 100) { 
      $("#boks1").animate({ 
       width: "720px" 
      }); 
      $("#boks2").css("display", "none"); 
      $("#boks3").css("display", "none"); 
      $("#boks4").css("display", "none"); 

     } else { 
      $("#boks1").animate({ 
       width: "100px" 
      }); 
      $("#boks2").css("display", ""); 
      $("#boks3").css("display", ""); 
      $("#boks4").css("display", ""); 



     } 
    }); 
}); 

$(document).ready(function() { 
    $("#boks2").click(function() { 
     if ($("#boks2").width() == 100) { 
      $("#boks2").animate({ 
       width: "720px" 
      }); 
      $(".test1").css("display", "none"); 
      $(".test4").css("display", "none"); 
      $(".test3").css("display", "none"); 

     } else { 
      $("#boks2").animate({ 
       width: "100px" 
      }); 
      $(".test1").css("display", ""); 
      $(".test4").css("display", ""); 
      $(".test3").css("display", ""); 



     } 
    }); 
}); 

$(document).ready(function() { 
    $("#boks3").click(function() { 
     if ($("#boks3").width() == 100) { 
      $("#boks3").animate({ 
       width: "720px" 
      }); 
      $(".test1").css("display", "none"); 
      $(".test2").css("display", "none"); 
      $(".test4").css("display", "none"); 

     } else { 
      $("#boks3").animate({ 
       width: "100px" 
      }); 
      $(".test1").css("display", ""); 
      $(".test2").css("display", ""); 
      $(".test4").css("display", ""); 

     } 
    }); 
}); 

$(document).ready(function() { 
    $("#boks4").click(function() { 
     if ($("#boks4").width() == 100) { 
      $("#boks4").animate({ 
       width: "720px" 
      }); 
      $(".test1").css("display", "none"); 
      $(".test2").css("display", "none"); 
      $(".test3").css("display", "none"); 

     } else { 
      $("#boks4").animate({ 
       width: "100px" 
      }); 
      $(".test1").css("display", ""); 
      $(".test2").css("display", ""); 
      $(".test3").css("display", ""); 

     } 
    }); 
}); 
+0

對我來說看起來不錯,除非你應該使用單個document.ready()函數,不需要爲每個監聽器分別創建一個。你的動畫看起來不自然? – Danmoreng

+0

打開時我跳到左邊。例如,如果您以「投資組合」打開div,它會跳到左側並打開。我希望它滑到左邊然後打開。 –

回答

1

我已經改變了你代碼有點。變化如下:

1)在HTML 添加的類名伯克class="boks"沿着你的內心Div

2)在你的CSS添加屬性.boks#boks1-2-3-4.col-sm-3。此外添加的類.zindex

3)在你的JQuery我改變了一切。看看並詢問你是否卡在任何地方。

Working : Demo

JQuery的

$(document).ready(function() { 
     $(".boks").click(function() { 
     var curId = this.id; //Gives you id of clicked element. 
     var curWidth = $("#" + curId).width(); // Taking width to check if it's 100px. 
     var offset = $("#" + curId).offset(); // Taking Position for animating to left. 
     var leftPos = offset.left; 
     var firstElementLeftPos = $("#boks1").offset().left; 
     leftPos = leftPos - firstElementLeftPos; 
     if (curWidth == 100) { 
      $(this).parent(".col-sm-3").css('left', '-' + leftPos + 'px'); 
      $("#" + curId).css("width", "720px").addClass('zindex'); 
     } else { 
      $(this).parent(".col-sm-3").css('left', '0px'); 
      $("#" + curId).css("width", "100px").delay(500).queue(function() { 
      $("#" + curId).removeClass('zindex'); 
      }); 
     } 
     }); 
    }); 

CSS

html { 
    width: 100%; 
} 
#test { 
    background-color: blue; 
    height: 400px; 
    width: 400px; 
    margin: auto; 
} 
#wrapper { 
    height: 500px; 
} 
.container { 
    background-color: black!important; 
    margin-bottom: 40px!important; 
} 
/* Edits are to Below CSS */ 

.boks { 
    height: 400px; 
    width: 100px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.5s ease-in-out; 
} 
#boks1 { 
    background-color: red; 
} 
#boks2 { 
    background-color: blue; 
} 
#boks3 { 
    position: relative; 
    background-color: white; 
} 
#boks4 { 
    background-color: pink; 
} 
.col-sm-3 { 
    left: 0px; 
    transition: 0.5s ease-in-out; 
    position: relative; 
} 
.zindex { 
    z-index: 999; 
} 

HTML

<div class="row"> 
    <div class="test1 col-sm-3"> 
     <div class="boks" id="boks1">About Me</div> 
    </div> 
    <div class="test2 col-sm-3"> 
     <div class="boks" id="boks2">Portfolio</div> 
    </div> 
    <div class="test3 col-sm-3"> 
     <div class="boks" id="boks3">Project</div> 
    </div> 
    <div class="test4 col-sm-3"> 
     <div class="boks" id="boks4">TEST</div> 
    </div> 
    </div> 
</div> 
+0

不錯!太棒了!謝謝。 –

+0

並感謝您的解釋! –

+0

很高興它幫助你。 – divy3993

1

只是爲了告訴你如何可以減少你的代碼使用$(this)和jQuery的class names ......

http://jsfiddle.net/nt8a29gm/3/

$(document).ready(function() { 
    $(".box").click(function() {  // check for click on .box 
     if($(this).width() == 100) {  // if this one width is 100 
      $('.box').not(this).hide(); // hide all but this 
      $(this).animate({   // animate the one we clicked on 
       width: "720px" 
      }); 
     } else { 
      $(this).animate({   // make this one small again 
       width: "100px" 
      }, 900, function() {   // 900 is animation speed 
       // Animation complete. // wait this animation is finished 
       $('.box').not(this).show(); // show all boxes again 
      }); 
     } 

    }); 
}); 

HTML看到class="box"

<div class="container"> 
    <div class="row"> 
     <div class="test1 col-sm-3"> 
      <div class="box">About Me</div> 
     </div> 
     <div class="test2 col-sm-3"> 
      <div class="box">Portfolio</div> 
     </div> 
     <div class="test3 col-sm-3"> 
      <div class="box">Project</div> 
     </div> 
     <div class="test4 col-sm-3"> 
      <div class="box">TEST</div> 
     </div> 
    </div> 
</div> 
+0

啊,現在代碼看起來好多了。但我需要刪除col-sm-3 div以便每次打開它,否則div將從每個col-sm打開。你可以嘗試在你的例子中打開第2到第4個div,看看會發生什麼。 –

+0

@HåkonSkaadel你的意思是你只是想隱藏這些盒子,而不是刪除它們,所以它沒有垂直變化? – caramba

+0

對不起,我不是最好用英文解釋。 希望這可以幫助http://imgur.com/oADNEne –