Skip to content

Instantly share code, notes, and snippets.

@jshawl

jshawl/index.html

Created May 25, 2017 21:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jshawl/2dfab85bbec7a213a5b7a77e6aab7ca2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jshawl/2dfab85bbec7a213a5b7a77e6aab7ca2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jshawl created this gist May 25, 2017.
    49 changes: 49 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    <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>