Question

所以我有一个图像循环，当没有被循环通过时，每个后续图像都会很好地消失。

如果我将鼠标悬停在图像上，则会加载（不会显示淡入淡出），然后其余图像会再次循环并轻松淡入。

我想要做的是，当我将鼠标悬停在某个链接上，并显示相应的图像时，我希望该图像也会淡入，我无法弄清楚如何执行此操作

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

基本上，用户可以悬停在链接上，在那一刻设置不透明度并淡入它？

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

所以这是标记：

<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示例。

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

1 个答案: