Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

ease toggle with jquery/html/css3 not working in ie properly

ease toggle with jquery/html/css3 not working in ie properly

Problem

JSfiddle

Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.

What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:

HTML


    ON
    OFF
    

CSS

.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
 }

 .on-off .on {
margin-right: 10px;
 }

 .slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
 }

 .right {
top: 0;
right: 0;
 }

 .left {
top: 0;
right: 50%;
 }

.ease {
-webkit-transition: all .5s ease;
  -moz-transition:    all .5s ease;
  -ms-transition:     all .5s ease;
  -o-transition:      all .5s ease;
  transition:      all .5s ease;
 }

Javascript

$('.on-off').on('click', function() {
    $slider = $('.slider');
    if ($slider.hasClass('right')) {
        $('.slider').removeClass('right');
        $('.slider').addClass('left');
    } else {
        $('.slider').removeClass('left');
        $('.slider').addClass('right');
    }
})

This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.

Thanks for the help.

Problem courtesy of: user2112618

Solution

Hey this is going to sound dumb, but here's the solution

$('.on-off').on('click', function() {
    $slider = $('.slider');
    if ($slider.hasClass('right')) {
        $('.slider').addClass('left');
        $('.slider').removeClass('right');
    } else {
        $('.slider').addClass('right');
        $('.slider').removeClass('left');
    }
});

Add before you remove, and add a semicolon to your function.

Solution courtesy of: Nick Avi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

ease toggle with jquery/html/css3 not working in ie properly

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×