Наведите указатель мыши на DIV, чтобы расширить ширину

Это то, что у меня есть до сих пор - https://jsfiddle.net/8216Lntb/

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 */
}

<html>

<head>
  <title>HOMEPAGE</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
</head>

<body>
  <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>
  <!--<div class="grow" style="background-color:red;"></div>-->
</body>

</html>

Ответы

Ответ 1

Я думаю, что вам не нужен javascript для этого.

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

<div id="growContainer">
<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>
</div>

Ответ 2

Вы можете легко решить эту проблему, используя 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>

Ответ 3

Если вы используете 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>

Ответ 4

Пожалуйста, проверьте этот код. Я использовал 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>

Ответ 5

Пожалуйста, проверьте этот код.

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>

Ответ 6

используйте чувствительную сетку, которая должна работать для вас.

Ответ 7

Там вы идете.

<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) +  = ' + 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 для нескольких объектов canvas?