javascript - littleBoxes JQuery 代码中的链接

Question

我正在尝试将这个整洁的 header 添加到我的站点:http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/

一个问题是 javascript 使所有链接都以与小框相同的方式进行动画处理，因此我在标题中包含的任何链接都将变为动画。我在 Stack Overflow 上找到了一个线程，它提供了一些解决方案。在找到一个似乎有效的方法后，我发现盒子一旦展开就不再有动画效果。当您单击框 div 将其关闭时，它会刷新页面。

我想找到一种在不影响动画效果的情况下包含链接的方法。

这是 Javascript:

$(function() {
    /* object to save the initial positions of each box */
    var divinfo = {"initial": []};
    /* index of the selected / clicked box */
    var current = -1;

    /* we save the index,top and left of each box */
                $('#littleBoxes > div','staffer').each(function(){
                 $('staffer').removeClass('#littleBoxes a').addClass('#staffer a');
        var $this = $(this);
        var initial = {
                    'index' : $this.index(),
                    'top'     : $this.css('top'),
                    'left'     : $this.css('left')
        };
        divinfo.initial.push(initial);
    });

    /* click event for the anchors inside of the boxes */
    $('#littleBoxes a').bind('click',function(e){
            var $this         = $(this);
            var $currentBox    = $this.parent();
            /* set a z-index lower than all the other boxes,
            to see the other boxes animation on the top*/
            $currentBox.css('z-index','1');

            /* if we are clicking on an expanded box: */
            if(current == $currentBox.index()){
                /* put it back (decrease width, height,
                and set the top and left back)
                the previous positions are saved in the divinfo obj*/
                $currentBox.stop().animate({
                        'top'  : divinfo.initial[$currentBox.index()].top,
                        'left' : divinfo.initial[$currentBox.index()].left,
                        'width'  : '90px',
                        'height' : '90px'
                },800,'easeOutBack').find('.boxcontent').fadeOut();

                $('#littleBoxes > div').not($currentBox).each(function(){
                    var $ele         = $(this);
                    var elemTop     = divinfo.initial[$ele.index()].top;
                    var elemLeft     = divinfo.initial[$ele.index()].left;
                    $ele.stop().show().animate({
                        'top'         : elemTop,
                        'left'        : elemLeft,
                        'opacity'    : 1
                    },800);
                });
                current = -1;
            }
            /* if we are clicking on a small box : */
            else{
                /* randomly animate all the other boxes.
                Math.floor(Math.random()*601) - 150 creates a random
                number between -150 and 450. This range is considering
                the initial lefts/tops of the elements. It's not the exact
                range, since we would have to calculate the range
                based on each one of the boxes. Anyway, it fits our needs...
                */
                $('#littleBoxes > div').not($currentBox).each(function(){
                    var $ele = $(this);
                    $ele.stop().animate({
                        'top' : (Math.floor(Math.random()*601) - 150) +'px',
                        'left': (Math.floor(Math.random()*601) - 150) +'px',
                        'opacity':0
                    },800,function(){
                        $(this).hide();
                    });
                });

                /* expand the clicked one;
                also, fadeIn the content (boxcontent)
                */
                var newwidth     = 945;
                var newheight     = 375;
                $currentBox.stop().animate({
                    'top'     : '0px',
                    'left'    : '0px',
                    'width' : newwidth +'px',
                    'height': newheight+'px'
                },800,'easeOutBack',function(){
                    current = $currentBox.index();
                    $(this).find('.boxcontent').fadeIn();
                });
            }
            e.preventDefault();
    });
});

这是 CSS:

.littleBoxes {
    width:1000px;
    height:343px;
    margin:0 auto;
    position:relative;

}

.littleBoxes > div {
    position:absolute;
    width:90px;
    height:90px;
    text-align:center;
    border:2px solid #F7F7FF;
    overflow:hidden;
    -moz-box-shadow:0px 0px 3px #555;
    -webkit-box-shadow:0px 0px 3px #555;
    box-shadow:0px 0px 3px #555;
    background-position:center center;
    z-index:999;
}

.littleBoxes div a.logobox {

text-transform: uppercase;
font-size: 120%;
font-weight: normal;
font-family: Oswald, sans serif;
letter-spacing: 1px;
display: block;
line-height: 90px;
text-decoration: none;
color: #F7F7FF;
background-image: linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
background-image: -o-linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
background-image: -moz-linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
background-image: -webkit-linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
background-image: -ms-linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
background-image: -webkit-gradient( linear, right bottom, left top, color-stop(0.05, #111111), color-stop(0.5, #2A2D34), color-stop(0.95, #111111) );
outline: none;

}

.littleBoxes div.boxcontent{

    height:380px;
    text-align:left;
    padding:10px;
    font-size:100%;
    color: #333232;
    background-color:#F7F7FF;
    border:2px solid #F7F7FF;
    margin:0px 0px 0px 0px;
    text-shadow:1px 1px 1px #fff;
    -moz-box-shadow:1px 1px 3px #777;
    -webkit-box-shadow:1px 1px 3px #777;
    box-shadow:1px 1px 3px #777;
    opacity:0.9;
    display:none;
}

.boxcontent .boxinfo {

display: inline-block;
background: #F7F7FF;
width: 46%;
height: 200px;
text-align: justify;
overflow-y: auto;
padding: 10px;
margin-top: -20px;

}

.boxcontent .boxstaff {

float: right;
width: 46%;

}

.boxinfo b {
  font-size: 105%;
  text-shadow: #333232 0 1px 1px;
  background: linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.boxcontent div a {
display: inline;
background: transparent;

}


.bg1, .bg2, .bg3, .bg4{
    background-repeat:no-repeat;
}
.bg1{
    background-image:url(../images/1.jpg);
}
.bg2{
    background-image:url(../images/2.jpg);
}
.bg3{
    background-image:url(../images/3.jpg);
}
.bg4{
    background-image:url(../images/4.jpg);
}
.bg5{
    background-image:url(../images/5.jpg);
}

#staffer h1 {
  display: block;
  margin-top: -20px;
  text-align: center;
  text-transform: uppercase;
text-shadow: #333232 0 1px 1px;
   background: linear-gradient(right bottom, #111111 5%, #2A2D34 50%, #111111 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#staffer h2 {

display: block;
width: 120px;
text-align: center;
text-transform: uppercase;
margin-top: -25px;


}

#staffer img {
  margin: -20px;
  border: 2px solid #fff;
-webkit-filter: grayscale(100%); filter: grayscale(100%);
transition: all, 1s;
  -moz-transition: all, 1s;
  -webkit-transition: all, 1s;

}

#staffer img:hover {

-webkit-filter: grayscale(0%); filter: grayscale(0%);

}

这是当前的演示:http://codepen.io/karlen/pen/RNeqrm

Answer 1

好吧，我开始工作了。

我只是拿了原始(工作)代码，与您的代码进行了比较，发现了一些差异。

首先，不知道为什么，你用的是bind()方法而不是on()。根据 jQuery 的官方文档，后者是首选。

其次，您更改了容器的大小，单击菜单时应打开容器。这是一个正确的更改。

最后，导致失败的主要变化是以下代码。你改变了这个:

$('#littleBoxes > div').each(function() {

通过这个:

$('#littleBoxes > div', 'staffer').each(function() { 
     $('staffer').removeClass('#littleBoxes a').addClass('#staffer a');

有一些问题。

1. 您通过更改第一行的选择器来破坏代码。
2. 您的选择器在两行中均无效，因为您没有名为 staffer 的标签

解决问题后，我让它开始工作。

更新我还注意到，单击打开内容内的链接也会使菜单动画化，这是不需要的(IMO)。所以我更改了选择器，使其不是针对所有链接，而是针对具有 .logobox 类的链接。

这是工作结果。

$(function() {
  /* object to save the initial positions of each box */
  var divinfo = {
    "initial": []
  };
  /* index of the selected / clicked box */
  var current = -1;
  /* we save the index,top and left of each box */
  $('#littleBoxes > div').each(function() {
    $('#staffer').removeClass('#littleBoxes a').addClass(
      '#staffer a');
    var $this = $(this);
    var initial = {
      'index': $this.index(),
      'top': $this.css('top'),
      'left': $this.css('left')
    };
    divinfo.initial.push(initial);
  });
  /* click event for the anchors inside of the boxes */
  $('#littleBoxes a.logobox').bind('click', function(e) {
    var $this = $(this);
    var $currentBox = $this.parent();
    /* set a z-index lower than all the other boxes,
        to see the other boxes animation on the top*/
    $currentBox.css('z-index', '1');
    /* if we are clicking on an expanded box: */
    if (current == $currentBox.index()) {
      /* put it back (decrease width, height,
          and set the top and left back)
          the previous positions are saved in the divinfo obj*/
      $currentBox.stop().animate({
        'top': divinfo.initial[$currentBox.index()]
          .top,
        'left': divinfo.initial[$currentBox.index()]
          .left,
        'width': '90px',
        'height': '90px'
      }, 800, 'easeOutBack').find('.boxcontent').fadeOut();
      $('#littleBoxes > div').not($currentBox).each(
        function() {
          var $ele = $(this);
          var elemTop = divinfo.initial[$ele.index()]
            .top;
          var elemLeft = divinfo.initial[$ele.index()]
            .left;
          $ele.stop().show().animate({
            'top': elemTop,
            'left': elemLeft,
            'opacity': 1
          }, 800);
        });
      current = -1;
    }
    /* if we are clicking on a small box : */
    else {
      /* randomly animate all the other boxes.
          Math.floor(Math.random()*601) - 150 creates a random
          number between -150 and 450. This range is considering
          the initial lefts/tops of the elements. It's not the exact
          range, since we would have to calculate the range
          based on each one of the boxes. Anyway, it fits our needs...
          */
      $('#littleBoxes > div').not($currentBox).each(
        function() {
          var $ele = $(this);
          $ele.stop().animate({
            'top': (Math.floor(Math.random() *
              601) - 150) + 'px',
            'left': (Math.floor(Math.random() *
              601) - 150) + 'px',
            'opacity': 0
          }, 800, function() {
            $(this).hide();
          });
        });
      /* expand the clicked one;
          also, fadeIn the content (boxcontent)
          */
      var newwidth = 945;
      var newheight = 375;
      $currentBox.stop().animate({
        'top': '0px',
        'left': '0px',
        'width': newwidth + 'px',
        'height': newheight + 'px'
      }, 800, 'easeOutBack', function() {
        current = $currentBox.index();
        $(this).find('.boxcontent').fadeIn();
      });
    }
    e.preventDefault();
  });
});

#logo {
  display: block;
  height: 380px;
  width: 950px;
  background: #F7F7FF;
  background-image: url(http://thoseleftbehind.b1.jcink.com/uploads/thoseleftbehind/Images/amlogo.jpg);
  background-size: cover;
  background-attachment: fixed;
  margin: 0 auto;
  margin-top: 50px
}
.littleBoxes {
  width: 1000px;
  height: 343px;
  margin: 0 auto;
  position: relative
}
.littleBoxes > div {
  position: absolute;
  width: 90px;
  height: 90px;
  text-align: center;
  border: 2px solid #F7F7FF;
  overflow: hidden;
  -moz-box-shadow: 0 0 3px #555;
  -webkit-box-shadow: 0 0 3px #555;
  box-shadow: 0 0 3px #555;
  background-position: center center;
  z-index: 999
}
.littleBoxes div a.logobox {
  text-transform: uppercase;
  font-size: 120%;
  font-weight: 400;
  font-family: Oswald, sans serif;
  letter-spacing: 1px;
  display: block;
  line-height: 90px;
  text-decoration: none;
  color: #F7F7FF;
  background-image: linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  background-image: -o-linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  background-image: -moz-linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  background-image: -webkit-linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  background-image: -ms-linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.05, #111), color-stop(0.5, #2A2D34), color-stop(0.95, #111));
  outline: none
}
.littleBoxes div.boxcontent {
  height: 380px;
  text-align: left;
  padding: 10px;
  font-size: 100%;
  color: #333232;
  background-color: #F7F7FF;
  border: 2px solid #F7F7FF;
  margin: 0;
  text-shadow: 1px 1px 1px #fff;
  -moz-box-shadow: 1px 1px 3px #777;
  -webkit-box-shadow: 1px 1px 3px #777;
  box-shadow: 1px 1px 3px #777;
  opacity: .9;
  display: none
}
.boxcontent .boxinfo {
  display: inline-block;
  background: #F7F7FF;
  width: 46%;
  height: 200px;
  text-align: justify;
  overflow-y: auto;
  padding: 10px;
  margin-top: -20px
}
.boxcontent .boxstaff {
  float: right;
  width: 46%
}
.boxinfo b {
  font-size: 105%;
  text-shadow: #333232 0 1px 1px;
  background: linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.boxcontent div a {
  display: inline;
  background: transparent
}
.bg1,
.bg2,
.bg3,
.bg4 {
  background-repeat: no-repeat
}
.bg1 {
  background-image: url(../images/1.jpg)
}
.bg2 {
  background-image: url(../images/2.jpg)
}
.bg3 {
  background-image: url(../images/3.jpg)
}
.bg4 {
  background-image: url(../images/4.jpg)
}
.bg5 {
  background-image: url(../images/5.jpg)
}
#staffer h1 {
  display: block;
  margin-top: -20px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: #333232 0 1px 1px;
  background: linear-gradient(right bottom, #111 5%, #2A2D34 50%, #111 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
#staffer h2 {
  display: block;
  width: 120px;
  text-align: center;
  text-transform: uppercase;
  margin-top: -25px
}
#staffer img {
  margin: -20px;
  border: 2px solid #fff;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all, 1s;
  -moz-transition: all, 1s;
  -webkit-transition: all, 1s
}
#staffer img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="logo">
  <div class="littleBoxes" id="littleBoxes">
    <div class="boxlink bg1" style="top:0px;left:0px;">
      <a class="logobox" href="">About</a>

      <div class="boxcontent">
        <p></p>

        <div class="boxinfo">
          <b>Those Left Behind is a zombie survival RPG</b> based in the fictional Massachusetts city of Acheron.
          <br>
          <br>In November of 2014, the dead began to rise and the human population found itself tested. Most major cities fell to the undead, but a few quarantine zones have managed to stay afloat due to military protection. Now the year is 2034 and, as you
          might expect, the times have twisted many people into hardened survivalists.
          <br>
          <br>Those in the quarantine zones are offered protection by what's left of the U.S. military, but it comes at the cost of many of their freedoms and dignities. Meanwhile, corruption from both the military and criminal organizations makes it difficult
          to live even within areas deemed safe.
          <br>
          <br>How will you survive in a world where you're one of those left behind?
        </div>

        <div class="boxstaff">
          <div id="staffer">
            <h1>Staff</h1>

            <h2>Amy</h2>
            <a href="http://thoseleftbehind.jcink.net/index.php?showuser=2" target="_blank">
              <img src="http://i.imgur.com/5HN9d6Z.jpg">
            </a>
          </div>
        </div>
        <p>
      </div>
    </div>

    <div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div>

    <div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div>

    <div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div>

    <div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div>

    <div class="boxlink bg2" style="top:95px;left:95px;">
      <a class="logobox" href="">Groups</a>

      <div class="boxcontent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div>

    <div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div>

    <div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div>

    <div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div>

    <div class="boxlink bg3" style="top:190px;left:190px;">
      <a class="logobox" href="">News</a>

      <div class="boxcontent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div>

    <div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div>

    <div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div>

    <div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div>

    <div class="boxlink bg4" style="top:285px;left:285px;">
      <a class="logobox" href="">Credits</a>

      <div class="boxcontent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:380px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:380px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:380px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:380px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:475px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:475px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:475px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:475px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:570px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:570px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:570px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:570px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:665px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:665px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:665px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:665px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:760px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:760px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:760px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:760px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:0px;left:855px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:95px;left:855px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:190px;left:855px;"></div>

    <div class="bg5" style="background-position:-270px -180px;top:285px;left:855px;"></div>
  </div>
</div>

The version in CodePen也更新了。