jQuery：将鼠标悬停在图像上时淡入图像

Question

所以我有一个图像循环，当没有被循环弄乱时，每个后续图像都会很好地淡入。

如果我将鼠标悬停在图像上，它会加载（不褪色），然后其余图像会再次循环并很好地淡入。

我想要做的是，当我将鼠标悬停在链接上并出现相应的图像时，我希望该图像也淡入，但我不知道该怎么做

在加载此特定图像之前，将其不透明度设置为 0.6，然后慢慢淡入为 1.0。

那么基本上，用户将鼠标悬停在一个链接上，在那一刻设置不透明度并将其淡入是可能的吗？

再次感谢大家，顺便说一下，我是一个 jQuery 新手，所以非常感谢任何 cmets/帮助。

所以这是标记：

<div id="s1" style="z-index:100">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
</div>

<ul id="nav">
  <li id="nav1"><a href="#" onmouseover="changeSlide(0)" 
                      onmouseout="continueSlide(0)">Text1</a></li>
  <li id="nav2"><a href="#" onmouseover="changeSlide(1)" 
                      onmouseout="continueSlide(1)">Text2</a></li>
</ul>


function changeSlide(slide) {
    $('#s1').cycle({
        fx: 'fade',
        startingSlide: slide,
        speed: 1500,
        timeout: 0
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 0
    });
}

function continueSlide(slide) {
    $('#s1').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    });
}
$(function() {

    $('#s1').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    }); 
});

</script>

我试图看看我是否可以在这些方面放置一个 onBefore 或其他东西并调用一个淡出函数，但无法弄清楚。

Answer 1

fadeTo 函数允许您淡入/淡出控制不透明度的元素。

您可以使用hover 函数触发不透明度更改：

$('#s1 img').hover(
  function(){
    $(this).fadeTo('slow', 1);
  },
  function(){
    $(this).fadeTo('slow', 0.6);
});

检查this 示例。