jQuery: 鼠标悬停时图像淡入，鼠标移开时图像淡出

Question

这应该很简单。就是做不对。我希望我的网页加载不透明度为 50% 的图像。然后，在鼠标悬停时将不透明度提高到 1，并在鼠标移开时再次降低到 0.5。

<!DOCTYPE html>
<html lang='no'>
<meta charset ="utf-8"
<head>

<title>Øving 7</title>

<style type="text/css">
img {
  opacity: 0.5;
}
</style>

<script src="jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function() {

    $("images").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
    });

</script>

</head>

<body bgcolor="lightgrey">
<h1>Oppgave 1 - jQuery</h1>

<img class="bild" src="b1.jpg" alt="Bilde1" border="0"/>
<img class="bild" src="b2.jpg" alt="Bilde2" border="0"/>
<img class="bild" src="b3.jpg" alt="Bilde3" border="0"/>
<img class="bild" src="b4.jpg" alt="Bilde4" border="0"/>
<img class="bild" src="b5.jpg" alt="Bilde5" border="0"/>


</body>
</html>

Answer 1

Try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$(document).ready(function() {

    $(".vs").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
    });

</script>
<style>
.vs{
 opacity: 0.5;
width:33.33%;
}
</style>
<div class="w3-row-padding w3-hide-small" style="margin:0 -16px">
<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

<div class="w3-third w3-center">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="vs">

</div>

</div>

Answer 2

使用 CSS 而不是 jQuery。

.bild {
   opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .bild:hover {
      opacity: 1;
      }

Answer 3

只需将 $("images") 更改为 $("img") 或给出 class $(".build")

$("img").hover(function() {
    $(this).animate({opacity: 1.0}, 500);
}, function() {
    $(this).animate({opacity: 0.5}, 500);
});

jQuery: 鼠标悬停时图像淡入，鼠标移开时图像淡出

jQuery: Fade in image while mouse over, fade out when mouse out

jquery

opacity

jquery-animate