Question

我有两个问题。一个......当我点击我网站上的图片时，我希望淡入淡出文本。我很幸运能够在这里得到切换工作，感谢社区，但现在我很好奇我是如何得到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”，但这样做会导致切换不起作用。

Answer 1

如果我理解你的问题，请试试这个：

$(".clickToHideClass img").click(function() {
    $(this).find("#text").fadeToggle();
});

使用Jquery淡入淡出我的文本，并显示：none

1 个答案: