ansaurus

Question

Fade In/Fade Out background color on checkbox - Jquery

Answer 1

+1 A:

I don't know if it's the best solution or not, but this is what I did to get your code working:

Instead of using the color plugin, include jQuery UI.
Pass animate a duration (such as 500) as well as the properties.
After the .parent().parent(), add .children().

As per request, here's a working example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>
        <style type="text/css" media="screen">
            html {
                font-family:Helvetica, sans-serif;
            }
        </style>
        <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            google.load('jquery', '1.4');
            google.load('jqueryui', '1.7.2');
        </script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $("#table input").click(function() {
                    var color=$(this).attr('checked')?'#ffff99':'#ffffff';
                    $(this).parent().parent().children().animate({'backgroundColor':color}, 500);
                });
            });
        </script>
    </head>
    <body>
        <form>
            <table id="table">
                <tr>
                    <td width="117">
                        <input type="checkbox" name="cb1" id="cb1" value="y" />
                    </td>
                    <td width="309">
                        Click me
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="cb2" id="cb2" value="y" />
                    </td>
                    <td>
                        Click me
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="cb3" id="cb3" value="y" />
                    </td>
                    <td>
                        Click me
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

icktoofay 2010-02-18 05:31:41

Can you paste the Script here so I can see the entire thing. Thank you !!

2010-02-21 21:44:52

As per your request, I added a full, working example. Also: if this worked, please click the little checkmark near my answer to mark it as correct.

icktoofay 2010-02-21 22:11:54

Answer 2

A:

$(function(){
    $("#Table input:checkbox").click(function(){
            var elem = $(this);
        if ( elem.is(":checked"))
        {
            elem.closest("tr").animate({'backgroundColor' : '#ffff99'});
        }
        else
        {
            elem.closest("tr").animate({'backgroundColor' : '#ffffff'});
        }
    });
});

rahul 2010-02-18 05:36:38

Did that work for you? I am getting a JS error in IE

2010-02-21 21:44:06

ansaurus

tags:

views:

answers:

Fade In/Fade Out background color on checkbox - Jquery

related questions