时间戳

首页 > 解决方案 > How can I make a Div fully push another div offscreen?

html - How can I make a Div fully push another div offscreen?

问题描述

I have 8 flexbox Div's (2columns, 4rows) how do I make it so when I press a button inside the Div it animates and pushes the other off screen whilst it expands right across?

I have currently been able to fully expand the div and hide the other one which looks ok (reason I hid it is because it ends up being about 5px wide on the left of the screen, but I've been working on this all day and just need to see how it's done!

CSS:

.col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;
}

.flex-grid {
   display: flex;
}

HTML

<div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>

Tried lots of different jQuery animations but it just doesn't seem to move if it will take it off screen, even tried to do it just css with a push and expand class.

Really struggling so would appreciate any help! (If you're wanting me to show the jQuery I've used to get the subpar solution of hiding the left element and expanding the right one across then let me know)

标签： htmljquerycssflexbox

解决方案

修改@JoelBonetR 的答案以使用 jQuery，您可以使用 mouseover 和 mouseleave 事件来捕获悬停事件。

$('.col2').on('mouseover', function(){
  $(this).css({
    'animation': '1s forwards',
    'background-color': 'red',
    'animation-name': 'example'
  });
  //hide other divs
  $(this).siblings().fadeOut();
});

$('.col2').on('mouseleave', function(){
  $(this).css({
    'animation-name': 'none',
    'background-color': 'white'
  });
  //show other divs
  $(this).siblings().fadeIn();
});
.col2 {
   flex: 1;
   height: 300px;
   margin: 5px;
   border:1px solid black;
   z-index: 1;
   text-align: right;
   
}

.flex-grid {
   display: flex;
}



@keyframes example {
  from {min-width: 0;}
  to {min-width: 99vw}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-grid">
  <div class="col2" id="box1"></div>
  <div class="col2" id="box2"></div>
</div>

推荐阅读