user200488 user200488 - 5 months ago 50
jQuery Question

Fade In/Fade Out background color on checkbox - Jquery

I want to fade in / fade out the row background color css when a user checks a checkbox. So when they check it, the row fades in to bright yellow. When they un-check it, the row fades out to white.

This is the JS I am playing with. I am using the color plugin:

<script type="text/javascript">
<!--
$(document).ready(function(){
$("#Table input").click(function() {
if ($(this).attr("checked") == true) {
$(this).parent().parent().animate({'backgroundColor' : '#ffff99'});
} else {
$(this).parent().parent().animate({'backgroundColor' : '#ffffff'});
}
});
});
//-->
</script>


and HTML

<form name="f">
<table id="Table" border="1"><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>


I am a complete newbie so thanks for the help

Answer

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

  1. Instead of using the color plugin, include jQuery UI.
  2. Pass animate a duration (such as 500) as well as the properties.
  3. 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">
<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>