Petar Vasilev Petar Vasilev - 28 days ago 6
CSS Question

How to make this animation properly with jQuery

I am trying to make an animation, you can see my efforts at jsfiddle. And here is the code I've used:



/* JavaScript: */

var app = function () {
var self = this;

var allBoxes = $('.box');
var shadow = $('#shadow');
var busy = false;

self.init = function () {
self.events();
};

self.getBoxLeftPosition = function(id)
{
var left = 100;

if (id == 'box2')
{
left = 300;
} else if (id == 'box3')
{
left = 500;
} else if (id == 'box4')
{
left = 700;
}

return left;
};

self.events = function () {

allBoxes.on('hover mousemove', function(event) {
event.stopPropagation();
var currentBox = $(this);

if (currentBox.hasClass('inactive') && !busy)
{
busy = true;
currentBox.removeClass('inactive').addClass('active').animate({
left: '-=30',
width: 260
}, 400, function () {
busy = false;
});

shadow.fadeIn(400);
}
});

$('body').mousemove(function(event) {
var currentBox = $('.active');
var leftValue = self.getBoxLeftPosition(currentBox.attr('id'));

if (currentBox.length > 0)
{
currentBox.stop();
currentBox.animate({
left: leftValue,
width: 200
}, 300, 'swing', function () {
currentBox.removeClass('active').addClass('inactive');
}, 300);

shadow.fadeOut(300);
}
});

};

return self;
};

var main = new app();
main.init();

/* CSS: */

html, body {
margin: 0;
}

.box {
position: absolute;
top: 120px;
width: 200px;
height: 420px;
}

.box div {
text-align: center;
color: white;
position: absolute;
top: 200px;
left: 0;
right: 0;
font-size: 25px;
font-weight: bold;
}

#box1 {
left: 100px;
background: pink;
}

#box2 {
left: 300px;
background: skyblue;
}

#box3 {
left: 500px;
background: orange;
}

#box4 {
left: 700px;
background: lightgreen;
}

#shadow {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('https://lh6.googleusercontent.com/Vz0GTzpQVaxmlIvvGgg64CSxcYBbHzu7gMQERduJ4qjU5HAg8KfisFFQvIqvKL5Vn7LIy6HZ=w1920-h916');
z-index: 10;
}

.inactive {
z-index: 5;
}

.active {
z-index: 20;
}

<!-- HTML: -->

<div id="box1" class="box inactive">
<div id="copy1">Copy 1</div>
</div>

<div id="box2" class="box inactive">
<div id="copy2">Copy 2</div>
</div>

<div id="box3" class="box inactive">
<div id="copy3">Copy 3</div>
</div>

<div id="box4" class="box inactive">
<div id="copy4">Copy 4</div>
</div>

<div id="shadow"></div>





Here is what I am trying to achieve in words: I have 4 boxes and whenever a user hovers over one of them that box needs to expand a little and everything else needs to be grayed out and whenever the mouse leaves the box it needs to go back to it's original state.

In my jsfiddle I got it working to a point but it's buggy.

Answer

take a look at this JSFiddle

$('.box').hover(function(){
$(this).siblings().addClass('inactive');
}, function(){
$(this).siblings().removeClass('inactive');
});

tried to do it with pure css but sadly there's no such thing as prev sibling selector in css. Its kinda jumpy because of z-index getting immediately change on hover.