체크 상자에서 페이드 인/페이드 아웃 배경색 - Jquery

사용자가 체크 박스를 체크했을 때 행 배경색 CSS를 페이드 인/페이드 아웃시키고 싶습니다. 그래서 그들이 그것을 확인할 때 행이 밝은 노란색으로 사라집니다. 선택을 취소하면 행이 흰색으로 희미 해집니다.체크 상자에서 페이드 인/페이드 아웃 배경색 - Jquery

이것은 내가 놀고있는 JS입니다. 나는 색상 플러그인을 사용하고 있습니다 :

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

및 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>

을 너무 도움

출처

2010-02-18 user200488

는 최적의 솔루션 또는 아니라면 모르겠어요 주셔서 감사합니다, 하지만 이것이 내가 당신의 코드를 작동 시키려고 한 것입니다 :

jluery UI를 포함하는 대신 색상 플러그인을 사용하십시오.
animate 길이 (예 : 500)와 속성을 전달하십시오.
.parent().parent() 다음에 .children()을 추가하십시오.

는 요청에 따라, 여기에 작업 예제 :

<?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>

출처

2010-02-18 05:31:41 icktoofay

당신은 그래서 전체 일을 볼 수 있습니다 여기에 스크립트를 붙여 넣을 수 있습니다. 고맙습니다 !! – user200488

요청에 따라 전체 예제를 추가했습니다. 또한 :이 방법이 효과가 있다면 제 답변 옆의 작은 체크 표시를 클릭하여 올바른 것으로 표시하십시오. – icktoofay

$(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'}); 
     } 
    }); 
});

출처

2010-02-18 05:36:38 rahul

그게 효과가 있었나요? IE에서 JS 오류가 나타납니다. – user200488

체크 상자에서 페이드 인/페이드 아웃 배경색 - Jquery

답변

관련 문제