0

For a fullscreen three-column menu I've created three absolute-positioned div boxes and made each of them expand horizontally fullscreen with a JQuery selector and the toggle command. It works, but I'd like to have the animation smoothly. How could I do that?

Here's the JSFiddle code for it.

This is the HTML code:

<body>
    <div id='controls' style="background-color: green;" onclick="fullscreen();">
    </div>
    <div id='controls_002' style="background-color: yellow;" onclick="fullscreen_002();">
    </div>
    <div id='controls_003' style="background-color: purple;" onclick="fullscreen_003();">
    </div>

This is the JQuery code:

    $(document).ready(function(){
    $('.wrapper div').click(function() {
    $(this).toggleClass('active');
    $(this).siblings().not(this).toggleClass('hide');
});
});

And this is the CSS code:

    .wrapper{
    top: 0px;
    left: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.blue{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: blue;
}

.red{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: red;
}

.green{
    width: 33.33333333%;
    height: 100%;
    cursor: pointer;
    background: green;
} 

div{
    float: left;
}


.active{
    height: 100%;
    width: 100%;
}

.hide{
    display: none;
}​

3 Answers 3

0

Or with a simple jQuery code with no changes to your fiddle css code
Fiddle

    <script type="text/javascript">
$(document).ready(function(){
    $('.wrapper div').click(function() {
        $(this).toggleClass('go')
        if($(this).hasClass('go')){
          $(this).animate({'width':'100%'},{
              duration:1000,
              step:function(gox){
                  var width = gox < 100 ? (100 - gox) / 2 : 0;
                  $(this).siblings().css('width', width + "%"); 
                  }
              })
        }else{
            $('.wrapper div').animate({'width':'33.33%'},1000)
        }
    });
});
</script>
1
  • Thank you very much! Your solution fittest the most of how the three panels should behave in my website design.
    – kplasa
    Jun 5, 2014 at 15:20
0

You should try to add CSS transitions to the divs, unless you really need support for old browsers.

.wrapper div {
   -webkit-transition: all 1s;
   transition: all 1s;
}

I also added absolute positions to the divs, because the float seems to trigger some glitchy animations. Last but not least, put the 'active' div at top with z-index

http://jsfiddle.net/tSk3Z/10/

1
  • Thank you very much! I'll save your solution for my next tasks.
    – kplasa
    Jun 5, 2014 at 15:20
0

The CSS solution is probably the best way but if you are still looking for the jquery solution you could use the animate method with the step-function.

$(document).ready(function(){
    $('.wrapper div').click(function() {
        var obj = $(this),
            siblings = obj.siblings();
        obj.animate(
            {width: "100%"}, 
            {
                duration: 5000,
                step: function(now){
                    var width = now < 100 ? (100 - now) / 2 : 0;
                    siblings.css('width', width + "%");                    
                }
            }
        );
    });
});

http://jsfiddle.net/tSk3Z/11/

You may need to adjust the duration value to your needs

1
  • Thank you very much! Your solution was very helpful, too.
    – kplasa
    Jun 5, 2014 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.