这就是我到目前为止 - https://jsfiddle.net/8216Lntb/
select c.emp_email, c.product
from cart
group by c.emp_email, c.product
having sum(case when c.activity_type = 'Add' then 1
when c.activity_type = 'Remove' then -1
end) > 0;
body {
background-color: black;
margin: 0 auto;
height: 100%;
width: 100%;
}
.grow {
height: 100vw;
/* Origional height */
width: 25%;
/* Origional width */
margin: 0px 0 0px 0;
/* Just for presentation (Not required) */
float: left;
/* Just for presentation (Not required) */
position: relative;
/* Just for presentation (Not required) */
transition: height 0.5s;
/* Animation time */
-webkit-transition: height 0.5s;
/* For Safari */
}
.grow:hover {
width: 25%;
/* This is the height on hover */
}
我想要实现的是https://artsandculture.withgoogle.com/en-us/national-parks-service/parks
每次我将鼠标悬停在div上时，它都会删除一页，因为它超过了100％。
我的问题是如何做到这一点，当一个div扩展时，其他的只是变小，所以它们都停留在一个页面上
答案 0 :(得分：32)
我认为你不需要javascript 。
A*html,body{
margin: 0 auto;
height: 100%;
width: 100%;
}
body {
background-color: black;
}
#growContainer{
display: table;
width:100%;
height:100%;
}
.grow{
display: table-cell;
height:100%;
width: 25%;
-webkit-transition:width 500ms;
-moz-transition:width 500ms;
transition:width 500ms;
}
#growContainer:hover .grow{
width:20%;
}
#growContainer:hover .grow:hover {
width:40%;
}
答案 1 :(得分：17)
您可以使用toggleClass()
试试这个：
$(function() {
$('div').hover(function() {
$(this).toggleClass('expand');
$('div').not(this).toggleClass('shrink');
});
});body {
background-color: black;
margin: 0 auto;
height: 100%;
width: 100%;
}
.grow {
height: 100vw; /* Origional height */
width: 25%; /* Origional width */
margin: 0px 0 0px 0; /* Just for presentation (Not required) */
float: left; /* Just for presentation (Not required) */
position: relative; /* Just for presentation (Not required) */
-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
}
.expand{
width: 40%;
}
.shrink{
width: 20%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
答案 2 :(得分：14)
如果您对使用flexbox感到满意，这可能是您正在寻找的解决方案。
html, body{
height: 100%;
margin: 0;
}
.grow{
display: flex;
justify-content: center;
height: 100%;
overflow-x: hidden;
}
.grow > div{
flex-basis: 25%;
flex-shrink: 0;
transition: .5s;
}
.grow > div:hover{
flex-basis: 40%;
}
.grow > div:first-child:hover{
margin-left: 15%;
}
.grow > div:last-child:hover{
margin-right: 15%;
}<div class="grow">
<div style="background-color:#2A75A9;"></div>
<div style="background-color:#274257;"></div>
<div style="background-color:#644436;"></div>
<div style="background-color:#8F6048;"></div>
</div>
当中间的两个中的一个被徘徊时，这段代码实际上隐藏了左右框，就像你展示的网站一样。它也只是CSS，所以这是一个加号！
所以容器是flexbox，其子项始终居中，flex-basis为25％，且无法缩小（flex-shrink: 0），这意味着其中一个它们会长大，它们会溢出。
然后当第一个或最后一个悬停时，它们会增加15％的额外边距，让它们流回容器。
希望这有帮助
答案 3 :(得分：3)
请检查此代码。我使用jquery进行悬停效果
$(document).ready(function(){
$('.grow').hover(function() {
$( this ).addClass( "hover" );
$('.grow').not(this).removeClass("hover");
});
});body {
background-color: #8F6048;
margin: 0 auto;
height: 100%;
width: 100%;
}
.grow {
height: 100vw; /* Origional height */
width: 20%; /* Origional width */
margin: 0px 0 0px 0; /* Just for presentation (Not required) */
float: left; /* Just for presentation (Not required) */
position: relative; /* Just for presentation (Not required) */
transition:width 0.5s; /* Animation time */
-webkit-transition:width 0.5s; /* For Safari */
}
.grow.hover{
width: 40%; /* This is the height on hover */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="grow hover" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
答案 4 :(得分：1)
请检查此代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate Div Width on Hover in jQuery</title>
</head>
<body>
<p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Css：
.box{
width: 200px;
height: 150px;
background: #f0e68c;
border: 1px solid #a29415;
}
使用Javascript：
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var boxWidth = $(".box").width();
$(".box").mouseenter(function(){
$(this).animate({
width: "400"
});
}).mouseleave(function(){
$(this).animate({
width: boxWidth
});
});
});
</script>
答案 5 :(得分：0)
使用适合您的响应式网格。
答案 6 :(得分：0)
你去。
<div id="left" style="position: absolute; z-index: 1; width: 40px; height: 150px; left: 0px; background: #22bb22;">
</div>
<div id="right" style="position: absolute; z-index: 1; width: 40px; height: 150px; left: 40px; background: #bb2222;">
</div>
<div class="info" id="info" onClick="" style="position: absolute; width: 200px; height: 100px; bottom: 0px; ">
</div>
使用Javascript：
var obj1 = [];
var obj2 = [];
var objects = [];
obj1.push(document.getElementById('left'), ['left','px', 0, 2], ['width','px', 10, 2]);
obj2.push(document.getElementById('right'), ['left','px', 10, 2], ['width','px', 60, 2]);
objects.push(obj1, obj2);
startAnimation(objects, 2, 60);
function startAnimation(objects, seconds, fps, onCompleteFunction) {
var now;
var fps = fps;
var duration = seconds * 1000; //miliseconds
var iterations = seconds * fps;
var startTime = Date.now();
var previous = startTime;
var interval = 1000/fps;
var stop = false;
var delta;
var frameCounter = 0;
// info
var elapsed = 0;
var info = document.createElement('p');
document.getElementById('info').appendChild(info);
for (var i = 0; i < objects.length; i++) {
for(var j = 1; j < objects[i].length; j++) {
var splitValue = objects[i][0].style[ objects[i][j][0] ];
var originalValue = splitValue.split(objects[i][j][1]);
originalValue = parseInt(originalValue[0]);
var increment = originalValue; // increment will be altered by the easing formula
objects[i][j].splice(2, 0, originalValue);
objects[i][j].push(originalValue, increment);
}
}
animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info);
}
function animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info)
{
if (stop) {
return;
}
window.requestAnimationFrame( function() { animate(objects, now, startTime, previous, fps, interval, stop, delta, duration, elapsed, frameCounter, onCompleteFunction, info); }
);
now = Date.now();
delta = now - previous;
if (delta > interval) {
/* Just `previous = now` is not enough.
Lets say we set fps at 10 which means
each frame must take 100ms
Now frame executes in 16ms (60fps) so
the loop iterates 7 times (16*7 = 112ms) until
delta > interval === true
Eventually this lowers down the FPS as
112*10 = 1120ms (NOT 1000ms).
So we have to get rid of that extra 12ms
by subtracting delta (112) % interval (100).
Hope that makes sense. */
previous = now - Math.round(delta % interval); //<-- unconsistency on end frames
elapsed = (previous - startTime)/1000; // return value in seconds
frameCounter++;
animateObjectsArray(objects, elapsed, duration);
runInfo(elapsed, previous, startTime, frameCounter, info);
}
if (now - startTime >= duration) {
stop = true;
for (var i = 0; i < objects.length; i++) {
for(var j = 1; j < objects[i].length; j++) {
objects[i][0].style[objects[i][j][0]] = String(objects[i][j][3]) + objects[i][j][1];
}
}
onCompleteFunction();
}
}
function animateObjectsArray(objects, elapsed, duration) {
for (var i = 0; i < objects.length; i++) {
for(var j = 1; j < objects[i].length; j++) {
objects[i][j][5] = Math.round(easeArray[ objects[i][j][4] ]( elapsed , objects[i][j][2], (objects[i][j][3] - objects[i][j][2]), duration/1000) );
objects[i][0].style[ objects[i][j][0] ] = String(objects[i][j][5]) + objects[i][j][1];
}
}
}
function runInfo(elapsed, previous, startTime, frameCounter, info) {
info.innerHTML = frameCounter + 'f / ' + parseInt(elapsed) + 's = ' + parseInt(frameCounter/elapsed) + 'fps<br />';
}
// t = time (elapsed), b = initialValue, c = change(FinalValue - initialValue), duration)
var easeArray = [
//0 - simple linear tweening - no easing, no acceleration
function linearTween(t, b, c, d) {
return c*t/d + b;
},
//1 - quadratic easing in - accelerating from zero velocity
function easeInQuad(t, b, c, d) {
t /= d;
return c*t*t + b;
},
//2 - quadratic easing out - decelerating to zero velocity
function easeOutQuad(t, b, c, d) {
t /= d;
return -c * t*(t-2) + b;
},
//3 - quadratic easing in/out - acceleration until halfway, then deceleration
function easeInOutQuad(t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
},
//4 - cubic easing in - accelerating from zero velocity
function easeInCubic(t, b, c, d) {
t /= d;
return c*t*t*t + b;
},
]
https://jsfiddle.net/rrafw/4vxqLs3q/
以下大多数缓动函数可以在之后丢弃。 查看这篇文章，了解在同一requestanimationframe上设置各种样式元素的动画。
Is it better to use one or multiple requestAnimationFrame for multiple canvas objects?