jQuery：fadeToggle（）和复选框

Question

这是问题所在。我有一个复选框，当我选择它时，应该出现一个图像，所以div元素最初是隐藏的。它只是行不通。当div开始可见时，它可以工作。但在这种情况下，如果我选中该复选框，图像将消失，当我取消选中该复选框时，图像将显示。我想完全相反。解决方法是在页面加载时检查复选框，但这是不可接受的。应该取消选中复选框，并在页面加载时隐藏图像。

<div id="pic1Div">
<img src=pic1.jpg>
<br>
This should be visible when checkbox is checked
<br>It does exactly the opposite
</div>
<form>
Show Picture <input type=checkbox name="pic1">
</form>
<script>
$(':input[name="pic1"]:first').click(function() {
$('div[ID="pic1Div"]:first').fadeToggle("slow", "linear");
});
</script>

Here's the source code

Answer 1

如果图片可见，只需初次选中复选框，或者最初隐藏图片并取消选中复选框。

查看最初隐藏图像的example。

最初显示图片的example。

<小时/> 另外，您是否有理由使用属性选择器按id选择元素，而不是id选择器：

$('#pic1Div')

由于您只能使用任何给定id的元素，因此您也不需要:first伪选择器。

Answer 2

请勿使用visibility: hidden，fadeToggle适用于display:none：

http://jsfiddle.net/mYpsF/