Question

我有一个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，我只是认为对于任何只是查看完全代码的人来说会更容易。

当您将鼠标悬停在每个＆＃34; Shipment Created＆＃34;上时，您会看到通知块，您会看到它滑过并允许一个＆＃34;按钮＆＃34;在出现的权利，但问题是在＆＃34;按钮＆＃34;超过一定宽度，它移动到＆＃34;装运创建＆＃34;阻止，而不是紧挨着它。

如何让它在彼此旁边工作，而不是在它下面打开一个块？

Answer 1

如果更改2个div的宽度，您会发现它有效。在else语句中，将rightbox的宽度设置为19%，将leftbox的宽度设置为79%。您还可以移除leftbox的位置，即left:-90px;为了使其表现更好，我还将leftbox语句中的if宽度设置为{{1} }。

＆＃13;

90%

＆＃13;

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

＆＃13;

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

＆＃13;

在jQuery中动画脚本和样式问题

1 个答案: