我有 2 个问题。一个...我希望在单击我网站上的图像时淡入和淡出我的文本。非常幸运的是，多亏了这里的社区，我才得以切换工作，但现在我很好奇我如何才能让 fadeIn 和 fadeOut 工作。
我还希望在我实际单击图像之前隐藏或不显示我的文本。单击图像应该会导致文本淡入。如果我再次单击图像，我希望文本淡出。
有什么建议吗？
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JOHN DOE Project</title>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function () {
$(".clickToHideClass").click(function () {
// now toggle only the 'p' under 'this'
$('p', $(this)).toggle();
});
});
$(document).ready(function(){
$("p").hover(function(){
$("p").css("font-style","italic");
$("p").css("color", "pink");
$("p").css("font-weight", "bold");
},function(){
$("p").css("color","normal");
$("p").css("font-style", "normal");
$("p").css("font-weight", "normal");
});
});
</script>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><a href="https://www.facebook.com/johndoe?fref=ts"><img src=" PUT SOMETHING HERE FOR IMAGE OF YOUR BANNER OR SOMETHING " alt="JohnDoe" width="366" height="66" /></a>
</div>
<div id="topNavigation"></div>
</div>
</div>
<div id="wrapper">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" /></a>
<div id="text">
<h1><a>Language and the World</a></h1>
<p><a>An aspiration and dream of mine</a>
</p>
</div>
</div>
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" />
</a>
<div id="text">
<h1><a>Music and Drama</a></h1>
<p><a>Keeps me pumping on every hour of the day!</a>
</p>
</div>
</div>
<div id="col1" class = "clickToHideClass"><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251">
</a><div id="text">
<h1><a>Friendship</a></h1>
<p><a> Without them I really wouldn't know Myself</a></a></p>
</div></div>
</div>
</div></div>
<div id="outerWrapper">
<div id="footer"><a href="https://www.facebook.com/johndoe?fref=ts">Contact information</a> | <a href="https://www.facebook.com/johndoe?fref=ts">Website</a> | <a href="https://www.facebook.com/johndoe?fref=ts">Terms</a> | <a href="https://www.facebook.com/johndoe?fref=ts">Site by </a></div>
</div>
</div>
</body>
</html>
这是 CSS 的一部分:
#text p a {
text-decoration: none;
}
在我想输入的 css 中，“display:none”，但这样做会导致切换不起作用。
最佳答案
如果我正确理解你的问题，试试这个:
$(".clickToHideClass img").click(function() {
$(this).find("#text").fadeToggle();
});
关于javascript - 使用 Jquery 淡入和淡出我的文本，还显示 :none，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23417039/