Question

我正在开发我的第一个认真的网站，我坚持这个问题。

首先，我认为我的JQuery极其笨拙并且可能以更有效的方式完成，如果能更好地编写代码，我会喜欢一些帮助（Feks我可能会使用很多功能）。

我需要一些关于动画的帮助。我想让div在它们打开之前从容器上移动到leftside。现在的样子看起来很不自然。

我将不胜感激。

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

向您展示如何在jQuery中使用$(this)和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>

Answer 2

我在某种程度上改变了你的代码。变更如下：

1）在内部class="boks"的HTML 添加的班级名称 Div中。

2）在 .boks 的CSS添加属性中， #boks1-2-3-4 和{{1 }} 即可。同时添加了课程.col-sm-3

3）在你的JQuery中我改变了一切。看看，问你是否卡在任何地方。

FFmpeg decode raw buffer with avcodec_decode_video2

<强> JQuery的

.zindex

<强> CSS

 $(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');
          });
        }
      });
    });

<强> HTML

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

需要Jquery动画/功能帮助

2 个答案: