javascript - jQuery中的动画脚本和样式问题

我在使用jQuery脚本或其样式与组合时遇到问题，但是如果您看一下此jsfiddle：http://jsfiddle.net/mdLtvrpk/3/

这是我的脚本：

   $('.holdingbox').hover(function() {
     var rightbox = $('.rightbox', this);
    var leftbox = $('.leftbox', this);
     if (rightbox.hasClass('active')) {
       rightbox.stop().animate({
         width: '0px',
       }, 500).removeClass('active');
         leftbox.stop().delay(500).animate({
         width: '100%',
         left: '0px'
       }, 1000).removeClass('hover');
     } else {
       rightbox.stop().delay(500).animate({
         width: '80px',
           float:'right'
       }, 500).addClass('active');
         leftbox.stop().animate({
         left: '-90px',
         width: '90%'
       }, 500).addClass('hover');
     }
   });
 })

您可以通过jsfiddle链接找到css和html，我认为对任何人来说，仅查看正在运行的代码会更容易。

您会看到，将鼠标悬停在每个“ Shipment Created”通知栏上时，您会看到它滑过并允许右侧的“ button”出现，但是问题出在“ button”超出一定范围之后宽度，它将移动到“已创建装运”块的下方，而不是在其旁边。

我如何才能使它彼此相邻工作，而不是在其下面打开一个块？

最佳答案

如果您更改2格的宽度，您会发现它起作用。在else语句中，将rightbox的宽度设置为19%，将leftbox的宽度设置为79%。您也可以删除leftbox的位置，即left:-90px;为使其表现更好，我还将leftbox语句中的if宽度设置为90%。

$(document).ready(function() {
  $('.holdingbox').hover(function() {
    var rightbox = $('.rightbox', this);
    var leftbox = $('.leftbox', this);
    if (rightbox.hasClass('active')) {
      rightbox.stop().animate({
        width: '0px',
      }, 500).removeClass('active');
      leftbox.stop().delay(500).animate({
        width: '90%',
        left: '0px'
      }, 1000).removeClass('hover');
    } else {
      rightbox.stop().delay(500).animate({
        width: '19%',
        float: 'right'
      }, 500).addClass('active');
      leftbox.stop().animate({
        width: '79%'
      }, 500).addClass('hover');
    }
  });
})

ul.menu {
  list-style-type: none;
}

.holdingbox {
  position: relative;
  top: 0;
  width: 100%;
  height: 50px;
}

.holdingbox .leftbox {
  position: relative;
  width: 90%;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 1px;
}

.holdingbox .rightbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 42px;
  vertical-align: top;
  margin-right: 0;
  background-color: lightgray;
}

.holdingbox .rightbox .content1 {
  width: 100px;
  position: absolute;
  height: 40px;
  left: 0;
  top: 0;
  right: 0;
  padding-left: 1px;
}

.leftbox.hover {
  width: 200px;
  display: inline-block;
}

.rightbox.active {
  float: none;
  display: inline-block;
}

.rightbox {
  float: right;
}

.holdingbox .rightbox .content1 {
  width: 100% !important;
}

.leftbox.hover {
  background-color: #F3F3F3;
}

//Menu Edit
.menu li a div img {
  margin: auto 10px auto auto;
  width: 40px;
  height: 40px;
}

.menu li a h4 {
  padding: 0;
  margin: 0 0 0 45px;
  color: #444444;
  font-size: 14px;
  position: relative;
}

.menu li a p {
  margin: 0 0 0 45px;
  font-size: 11px;
  color: #888888;
}

.menu li a h4 small {
  color: #999999;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
      <a href="http://192.168.1.178:8000/notifications/4d798673-fe2e-4294-81dd-49969df0dff6">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 2 hours ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 214439</p>
      </a>
    </div>
    <div class="rightbox" style="width: 0px; overflow: hidden;">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox" style="width: 100%; left: 0px; overflow: hidden;">
      <a href="http://192.168.1.178:8000/notifications/c7e7add5-eaa2-4b3c-84fe-062322567d5f">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 2102000003</p>
      </a>
    </div>
    <div class="rightbox" style="width: 0px; overflow: hidden;">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
      <a href="http://192.168.1.178:8000/notifications/1c578226-f735-4d62-be19-7deab4c08dbe">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 2102000002</p>
      </a>
    </div>
    <div class="rightbox" style="width: 0px; overflow: hidden;">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
      <a href="http://192.168.1.178:8000/notifications/c975030e-64e9-4481-8fd0-0004242515d8">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 2 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 2102000001</p>
      </a>
    </div>
    <div class="rightbox" style="width: 0px;">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox" style="overflow: hidden; width: 100%; left: 0px;">
      <a href="http://192.168.1.178:8000/notifications/6721dd8c-4f45-422f-81d0-80fa4fe128f9">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 3 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 212222</p>
      </a>
    </div>
    <div class="rightbox" style="width: 0px;">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox">
      <a href="http://192.168.1.178:8000/notifications/48780be4-52af-4278-b67a-6544eda95aae">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 2010</p>
      </a>
    </div>
    <div class="rightbox">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox">
      <a href="http://192.168.1.178:8000/notifications/ca2583eb-5146-471d-b285-5178c35ab0a1">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 210200000</p>
      </a>
    </div>
    <div class="rightbox">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox">
      <a href="http://192.168.1.178:8000/notifications/1e23de34-d699-4e3a-9110-e02ab5ce000b">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 4 weeks ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 250006</p>
      </a>
    </div>
    <div class="rightbox">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <li class="holdingbox">
    <!-- start message -->
    <!--                    <a href="#">/shipments/i/{'url_string']-->
    <div class="leftbox">
      <a href="http://192.168.1.178:8000/notifications/da74371c-2aa2-45ef-9b5d-28210c3816bb">
        <div class="pull-left">
          <!-- User Image -->
          <img src="/images/clipboard.png" class="img-circle" alt="Shipment">
        </div>
        <!-- Message title and timestamp -->
        <h4>
          Shipment Created
          <small><i class="fa fa-clock-o"></i> 1 month ago</small>
        </h4>
        <!-- The message -->
        <p>Pro Number - 214050</p>
      </a>
    </div>
    <div class="rightbox">
      <div class="content1">Mark Read<br><img src="https://upload.wikimedia.org/wikipedia/commons/2/28/White_X_in_red_background.svg" width="10px" height="10px">
      </div>
    </div>
  </li>
  <!-- end notification -->
</ul>