个人中心
gpt4 book ai didi

javascript - 将不透明度设置为 30%，持续时间为 0.5 秒

转载 作者：行者123 更新时间：2023-11-28 04:59:04 24 4
gpt4 key购买 nike

我的任务是在悬停时将缩略图图像的不透明度设置为 30%，持续时间为 0.5 秒。我对此很陌生，不确定我这样做是否正确。任何人都可以建议我的 js 文件中的代码吗？

<!DOCTYPE html>
<html>
<body>

<script> 
 $(document).ready(function(){
  // Add the hover handler to the link
  $("#imageCS").hover(
    function(){ // When mouse pointer is above the link
      // Make the image inside link to be transparent
      $(this).find("images/boxImage1").animate(
        {opacity:"0.3"},
        {duration:500}
      );
    },
    function(){ // When mouse pointer move out of the link
      // Return image to its previous state
      $(this).find("images/boxImage1").animate(
        {opacity:"1"},
        {duration:300}
		
$(document).ready(function(){
  // Add the hover handler to the link
  $("#imageCS").hover(
    function(){ // When mouse pointer is above the link
      // Make the image inside link to be transparent
      $(this).find("images/boxImage2").animate(
        {opacity:"0.3"},
        {duration:500}
      );
    },
    function(){ // When mouse pointer move out of the link
      // Return image to its previous state
      $(this).find("images/boxImage1").animate(
        {opacity:"1"},
        {duration:300}

$(document).ready(function(){
  // Add the hover handler to the link
  $("#imageCS").hover(
    function(){ // When mouse pointer is above the link
      // Make the image inside link to be transparent
      $(this).find("images/boxImage1").animate(
        {opacity:"0.3"},
        {duration:500}
      );
    },
    function(){ // When mouse pointer move out of the link
      // Return image to its previous state
      $(this).find("images/boxImage3").animate(
        {opacity:"1"},
        {duration:300}
</html>
</body>
</script> 
<!doctype html>
<html>
<head lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>TMA</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="main.css" rel="stylesheet" type="text/css"/>
<link href="myStyle.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<div id="socialmediafloat">
    <img src="images/facebook.png" id="facebook_icon" class="media_icons"/>
        <img src="images/twitter.png" id="twitter_icon" class="media_icons"/>
        <img src="images/youtube.png" id="youtube_icon" class="media_icons"/>
        <img src="images/pinterest.png" id="pinterest_icon" class="media_icons"/>
</div>
<div id="myheader">
	<div id="header" class="container">
		<div id="logo">
			<h1><a href="http://www.unisim.edu.sg/Pages/UniSIM.aspx"><img src="images/UniSIM.JPG"/></a></h1>
		</div>
	</div>
	<div id="highlights" class="container">
		<div class="title">
			<h1>Discover The UniSIM Advantage</h1>
			<span class="byline">Are you ready to open your mind to more possibilities, give yourself the opportunities that you've always wanted, and quench your thirst for knowledge? No matter what it is, whether to give yourself a second chance in your career or to provide for a better life for yourself and your loved ones, further education with UniSIM will get you there.</span>
		</div>
	</div>
</div>
<div id="content">
	<div id="myCols" class="container">
		<div class="col1">
            <img src="images/boxImage1.jpg" class="imageCS"/>
			<p>Whatever your goals, background or life stage, we believe in you, and we will equip you with the real-world knowledge and practice-oriented skills to excel, both in life and in your chosen career.</p>
			<button id="col1btn" class="button">Discover</button>
		</div>
		<div class="col2">
            <img src="images/boxImage2.png" class="imageCS"/>
			<p>With a range of more than 50 degree programmes in various disciplines, we focus on equipping our students with a competitive advantage in their industries. Explore the programmes we offer from our five schools and embark on your learning journey now.</p>
			<button id="col2btn" class="button">Programmes</button>
		</div>
		<div class="col3">
            <img src="images/boxImage3.jpg" class="imageCS"/>
			<p>SIM University (UniSIM) offers government-funded, full-time direct honours programme for school leavers. A full-time degree can normally be completed in 4 years although the maximum period of candidature is 6 years.</p>
			<button id="col3btn" class="button">Education</button>
		</div>
	</div>
</div>
<div id="details">
	<div class="container">
        <p>BSc Multimedia Technology and Design</p>
        <table id="MTDSchedule">
          <tr>
            <th></th>
            <th>Code</th>
            <th>Name</th>
            <th>Credit Units</th> 
            <th>Time Table</th>  
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>ICT271</td>
            <td>Introductory Programming Techniques in C++</td>
            <td>5</td>
            <td>Thursday/Week 1/Term 1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD105e</td>
            <td>Digital Photography Techniques</td>
            <td>5</td>
            <td>Friday / Week 2 / Term 1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD111e</td>
            <td>Creative Design Fundamentals</td>
            <td>5</td>
            <td>Wednesday / Week 1 / Term 1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD113e</td>
            <td>History of Media</td>
            <td>5</td>
            <td>Wednesday / Week 1 / Term 2</td>
          </tr>
        <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD201e</td>
            <td>Fundamentals of Graphics Design</td>
            <td>5</td>
            <td>Tuesday / Week 1 / Term 1</td>
        </tr>
        <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD203e</td>
            <td>Advanced Graphics Design</td>
            <td>5</td>
            <td>Tuesday / Week 2 / Term 2</td>
        </tr>
        <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD205e</td>
            <td>Audio Technology</td>
            <td>5</td>
            <td>Wednesday / Week 1 / Term 1</td>
        </tr>
        <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD207e</td>
            <td>Video Technology</td>
            <td>5</td>
            <td>Wednesday / Week 1 / Term 2</td>
        </tr>
        <tr>
            <td> <input type="checkbox"/></td>
            <td>MTD215</td>
            <td>Application of C++ in Multimedia</td>
            <td>5</td>
            <td>Wednesday / Week 1 / Term 2</td>
        </tr>
        </table>
        <button class="button">Reset</button>
    </div>	
</div>
<div id="footer" class="container">
    <p>&copy; All rights reserved. | SIM University</p>
</div>
</body>
</html>

最佳答案

还没有测试过，但我想你会想要这样的东西:

$(".imageCS").mouseover(function(){
  $(this).animate({
    opacity: 0.3
  }, 500 );
});

$(".imageCS").mouseout(function(){
  $(this).animate({
    opacity: 1
  }, 300 );
});

由于 imageCS 是一个类，因此您希望将 JQuery 选择器设置为 .imageCS 而不是 #imageCS (这将用于对于 div id 而不是类)。此外，由于它是一个类，这意味着您可以一次访问该类的所有图像，而不必分别为每个图像执行鼠标悬停事件。而且您不必查找图像 url，只需查找图像标记本身，因此只需 this 而不执行 .find 就可以了。

此外，如果您有权访问 CSS，我实际上会使用 CSS3 转换(而不是上面提出的 JQuery/JS 解决方案)来执行这些悬停事件。在我看来，这会更简单、更干净。

关于javascript - 将不透明度设置为 30%，持续时间为 0.5 秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42312563/

24 4 0
文章推荐： javascript - 如何让所有 Javascript 处理使用 JQuery .load() 加载的 html 部分
文章推荐： c++ - 在 Makefile 中使用 exit 命令导致编译错误
文章推荐： c++ - 同步 ISR 访问是否需要 volatile？
文章推荐： css - 在 Cambria 的字体中使用本地 src
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com