CODEWITHSUNDEEP
javascriptjquerycss
Shaoz
Shaoz

Reputation: 10653

color fading with jquery without the color plugin

I look around to learn how to fade a background color using jquery, but all of the answers lead to the jquery color plugin, which I don't wanna use. I want a pure jquery code to do it but can't seem to find it. And my work place are very reluctant on using plugings for their site, so I must use pure jquery.

I'm not an expert in jquery but this is what I came up with, which I think is not the solution:

$('#fade').css('background-color', '#2CAEA8').animate({'opacity': 0});

I just want the background to fade to white from any color. Please can someone show me the way? Thank you.

Upvotes: 0

Views: 1625

Answers (4)

Johan Danforth
Johan Danforth

Reputation: 4579

A simple/raw script for a "yellow fadeout", no plugins except jquery itself. Just setting background with rgb(255,255,highlightcolor) in a timer:

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>

Upvotes: 0

Jack Billy
Jack Billy

Reputation: 7211

I think I have found your questions answer! Here it is a live demo or you can view the code below --

HTML --

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
        <div id="fade">
            My Friend Shaoz!
        </div>
    </body>
</html>

CSS --

div#fade
{
 color: #333;
 background: #ddd;
 padding: 5px 5px;
 font-family: segoe ui;
 font-size: 12px;
 font-weight: bold;
 border: 2px solid #333;
}

Jquery --

$(document).ready(function(){
    var fadeobjid = 'fade';
    var fadetinobg = '#fff';
    var fadeouttobg = '#ddd';
    var fadeintotextcolor = '#000';
    var fadeouttotextcolor = '#333';
    var fadeinanimatespeed = '300';
    var fadeoutanimatespeed = '250';

    $('#' + fadeobjid).mouseover(function () {
        $(this).animate({
            'backgroundColor' : fadetinobg,
            'color' : fadeintotextcolor
        }, fadeinanimatespeed, 'linear', function() { });
    });
    $('#' + fadeobjid).mouseout(function () {
        $(this).animate({
            'backgroundColor' : fadeouttobg,
            'color' : fadeouttotextcolor
        }, fadeoutanimatespeed, 'linear', function() { });
    });
});

The thing is that you will need the jQuery-UI to do this. That's all you need!

Hope this would help you!

Upvotes: 0

Pramendra Gupta
Pramendra Gupta

Reputation: 14873

Html

<html>
    <body>
        <div id="fade">
            some text goes here
        </div>
    </body>
</html>

jquery

$(document).ready(function() {

    $('#fade').css('backgroundColor', $('#fade').css('backgroundColor')).animate({
        backgroundColor: '#ffffff'
    }, 5000);

});

css

#fade{
    background:#ff0;
}

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

Why not write the the code yourself?

You know that FFFFFF is white, which can be interpreted as RGB 255 255 255

For example, you have a rgb (converted from hex) value 100 100 100 and then you just run a loop and increment those values till they reach 255, and set the background color to the matching on every iteration.

Upvotes: 2

Related Questions