需要Jquery动画/函数帮助

Jquery animation/function help needed

本文关键字：函数 帮助 动画 Jquery 需要      更新时间：2023-09-26

我正在做我的第一个严肃的网站，我被这个问题卡住了。

首先，我认为我的JQuery是非常笨拙的，可能已经完成了一个更有效的方式，希望有人帮助我如何更好地编写这个代码(我可能使用了很多函数)。

其次，我需要一些动画的帮助。我想让div在打开之前移动到容器的左侧。现在看起来很不自然。

我很感激你的帮助。

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

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

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

1)在你的HTML 添加类名books class="boks"沿着你的内部Div

2) 在你的CSS属性添加 .boks , #boks1-2-3-4 和.col-sm-3 。亦新增.zindex类

3)在你的JQuery我改变了一切。看一看，问问你是否被困在什么地方了。

工作: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;
}


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

只是向您展示如何在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>
相关文章：