Skip to content

Instantly share code, notes, and snippets.

@jshawl jshawl/index.html
Created May 25, 2017

Embed
What would you like to do?
<style media="screen">
.container div{
width:25%;
height:100px;
float:left;
transition: all .2s ease;
}
</style>
<div class='container'>
<div style='background:red;'></div>
<div style='background:purple;'></div>
<div style='background:blue;'></div>
<div style='background:green;'></div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
var $all = $(".container div")
$all.hover(function(){}, function(){
$all.css('width', (100/ $all.length) + '%')
})
$(".container div").on("mousemove", function(e){
var index = $all.index(e.target)
var elementsLeft = $all.length - 2
var othersWidth = (20/ elementsLeft) + "%"
$all.css('width', othersWidth)
if(index === 0){
$all.eq(0).css('width','50%')
$all.eq(1).css('width','30%')
return
}
if(index === $all.length - 1){
$all.eq(-1).css('width','50%')
$all.eq(-2).css('width','30%')
return
}
var elementsLeft = $all.length - 3
var othersWidth = ((20 / elementsLeft)) + "%"
$all.css('width', othersWidth)
$all.eq(index).css('width','50%')
$all.eq(index - 1).css('width','15%')
$all.eq(index + 1).css('width','15%')
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.