javascript - 需要 Jquery 动画/功能帮助

Question

我正在开发我的第一个正式网站，但遇到了这个问题。

首先，我认为我的 JQuery 极其笨拙，可能可以以更有效的方式完成，希望获得有关如何更好地编写代码的帮助(Feks 我可能使用过很多功能)。

其次，我需要一些动画方面的帮助。我希望 div 在打开之前动画到容器的左侧。现在的样子看起来很不自然。

如有任何帮助，我将不胜感激。

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", "");

        }
    });
});

Answer 1

我稍微修改了你的代码。变化如下:

1) 在您的 HTML 中添加类名 boks 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>