jquerycssjquery-effectscss-transitions

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

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

Solution

  • 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.