jquery/css: how to implement a wipe left animation on background-color of a div

Question

Here's my css

#Slide {
    background: none;
    height: 30px;
    width: 140px;
}
#Slide.Selected {
    background: #ff0;
}

I want that whenever I add/remove the class Selected to #Slide, the background-color property is animated by wiping in from left/wiping out to right. Normally, the background-color just appears and disappears. If this is not doable while using css class, is it possible by using jquery .animate() function? or may be css3 transition property?

Any suggestions somebody

I don't think you can animate the background color to slide with a css class. What you have to do is to have a div with the new desired color that slide in/out. The answer on this [post](http://stackoverflow.com/questions/3633115/background-color-property-slide-up) has a fiddle to illustrate. — Didier Ghys, Nov 25 '11 at 15:03
If you don't need to support ie you can also use gradient for background and animate background position - either using css transitions, or a plugin that extends jquery animate so that in can operate on background position. — Litek, Nov 25 '11 at 15:26

score 2 · Accepted Answer · answered Nov 25 '11 at 15:19

You cannot do a wipe animation on background color with either jQuery or CSS3 animations.

To get this visual effect, you have a couple options. You can do a wipe transition on a whole separate element that is positioned behind your existing element such that it simulates the background. Or, you may be able to use a background image of the desired color and size and animate the background position to simulate a wipe.

score 1 · Answer 2 · answered Nov 07 '14 at 16:22

Here's a wipe_left function I did, saw your question when I was looking for my own answer:

wipe_left($('.wipe-left'), $('.wipe-left').css('width'));

function wipe_left (elem, width) {
        elem.css('width', '0px');
        elem.css("left", width);
        elem.animate({
            width: width,
            left: '0px'
        }, 5000);
    }

<div class="wipe-left" style="position: relative; top: 0; left: 0; background-color: lightblue; width: 300px; height: 200px;">
        &nbsp;
</div>

Fiddle is here: http://jsfiddle.net/LostInDaJungle/da16gx9n/1/

joemaller · Answer 3 · 2017-11-22T02:31:31.310

A smooth background wipe effect can be created using CSS pseudo-elements and transitions.

First inject a background pseudo-element into your main container. Then when a class is added to the container, use a transform to move that background out of the way.

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}

$("#slide").on("click", function() {
  $(this).toggleClass("on");
});

#slide {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 100px;
  background: salmon;
}

#slide .contents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide">
  <div class="contents">Click me!</div>
</div>

A few small considerations:

The container's rules should include overflow: hidden and position: relative.
Pseudo-elements will stack on top of non-positioned content nodes, so any visible contents of the container will need to be wrapped in a second block element.

Example on Codepen

jquery/css: how to implement a wipe left animation on background-color of a div

3 Answers3