2017-02-18 7 views
1

私の仕事は、ホバリング時に0.5秒間、不透明度30%にサムネイル画像を設定することです。私はこれに非常に新しいと私はこの権利をやっている場合は確信していません。誰も私のコードにjsファイルでアドバイスできますか?0.5秒間30%の不透明度を設定する

<!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} 
 
\t \t 
 
$(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"> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
\t <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"> 
 
\t <div id="header" class="container"> 
 
\t \t <div id="logo"> 
 
\t \t \t <h1><a href="http://www.unisim.edu.sg/Pages/UniSIM.aspx"><img src="images/UniSIM.JPG"/></a></h1> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="highlights" class="container"> 
 
\t \t <div class="title"> 
 
\t \t \t <h1>Discover The UniSIM Advantage</h1> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div id="content"> 
 
\t <div id="myCols" class="container"> 
 
\t \t <div class="col1"> 
 
      <img src="images/boxImage1.jpg" class="imageCS"/> 
 
\t \t \t <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> 
 
\t \t \t <button id="col1btn" class="button">Discover</button> 
 
\t \t </div> 
 
\t \t <div class="col2"> 
 
      <img src="images/boxImage2.png" class="imageCS"/> 
 
\t \t \t <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> 
 
\t \t \t <button id="col2btn" class="button">Programmes</button> 
 
\t \t </div> 
 
\t \t <div class="col3"> 
 
      <img src="images/boxImage3.jpg" class="imageCS"/> 
 
\t \t \t <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> 
 
\t \t \t <button id="col3btn" class="button">Education</button> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div id="details"> 
 
\t <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> \t 
 
</div> 
 
<div id="footer" class="container"> 
 
    <p>&copy; All rights reserved. | SIM University</p> 
 
</div> 
 
</body> 
 
</html>

+0

は、私達にあなたのコードを表示しますか? –

+1

おそらく関連するコードだけが表示されるように最小化し、簡単にテストすることができます。 –

答えて

0

はそれをテストしていませんが、私はあなたがこのような何かをしたいと思います:

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

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

imageCSがクラスであるので、あなたはjQueryのセレクタを持つようにしたいです.imageCSとし、#imageCSではない(これはクラスではなくdiv IDに使用されます)。さらに、クラスであるため、これは、クラスごとにmouseoverイベントを別々に行う必要がなく、一度にそのクラスのすべての画像にアクセスできることを意味します。そして、あなたは画像URLを見つける必要はありません。ただ画像タグそのものなので、thisを実行しないと、.findは問題ありません。

また、CSSへのアクセス権を持っている場合は、CSS3トランジションを使って実際にこれらのホバーイベントを実行します(前述のJQuery/JSソリューションとは対照的です)。それは、より簡単で清潔なIMOになります。

0

mouseenterイベントで効果を使用し、を1にリセットすると、setTimeoutとなります。

例:あなたはCSSでこの効果をしないのはなぜ

$('#so').mouseenter(function() { 
 
    $('#so').animate({opacity: 0.3}); 
 
    setTimeout(function() { 
 
    $('#so').animate({opacity: 1}) 
 
    }, 500); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- sample image --> 
 
<div id="so-img-div"> 
 
    <img id="so" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" style="border:1px solid black"> 
 
</div>

0

$imgWrapper = $('.image--wrapper'); 
 

 
\t $imgWrapper.hover(
 
    //this function will run when you hover your image 
 
\t function() { 
 
\t \t $(this).addClass('active'); 
 
\t }, function() { 
 
     $(this).removeClass('active'); 
 
\t } 
 
\t);
img { 
 
    opacity:0; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.active img { 
 
    opacity: 1; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image--wrapper"> 
 
    <img src= "https://www.w3schools.com/html/pic_mountain.jpg" /> 
 
</div>

関連する問題