Question

我在StackOverflowe上找到的这个脚本......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
    #appear_div { display: none; }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#appear').click(function() { $('#appear_div').show(); });
    });
  </script>
</head>
<body>
  <input type="checkbox" id="appear">
  <div id="appear_div">
  <input type="checkbox" id="cb1">Check me <input type="text" id="text1">
  </div>
</body>
</html>

我需要进一步发展。

当取消选中复选框时，我想隐藏div 。

＆安培;如何添加褪色效果？

感谢名单

Answer 1

$('#appear').click(function() {
    if(this.checked) {
        $('#appear_div').fadeIn();
    } else {
        $('#appear_div').fadeOut();
    }
});

Answer 2

假设您在谈论标有id = cb1

的复选框

$(document).ready(function() { 
  $("#cb1").click(function() { 
    if (this.checked) {
      $('#appear_div').fadeIn('slow'); 
    }
    else {
      $('#appear_div').fadeOut('slow'); 
    }
  }); 
});

如果您正在讨论标有id =的其他复选框，请使用此

$(document).ready(function() { 
  $("#appear").click(function() { 
    if (this.checked) {
      $('#appear_div').fadeIn('slow'); 
    }
    else {
      $('#appear_div').fadeOut('slow'); 
    }
  }); 
});

Answer 3

您可以像这样进行淡入淡出切换：

$(function() {
  $('#appear').change(function() { 
    $('#appear_div').animate({opacity: this.checked ? 1 : 0}); 
  }).change();
});

You can see a demo here。如果是.checked，我们.animate()不透明度为1（>中的），否则我们将其更改为0（淡出 out ），最后一次.change()调用是在页面首次加载时正确设置状态。如果你想改变速度，比如2秒，只需将它添加为下一个选项：

$('#appear_div').animate({opacity: this.checked ? 1 : 0}, 2000);

需要使用此脚本进行改进

3 个答案: