javascript - 淡入两个对象

Question

我想在我的网站上将图像设置为不透明度 0.5，然后我想在该图像上“弹出”一个不透明度等于 1 的单词。问题是，当我将图像设置为任何速度时，它就会开始排队当我用光标输入/离开图像时，所有功能都会起作用。

1. 该词的加载速度(立即)比带有“慢”的图像加载得更快，并且该词不会将不透明度更改为 1，因为它会失去不透明度图像(设置为 0.5)
2. 如何让“word”晚于图像加载？
3. 每当我在图像中移动光标(例如 10 倍/秒)时，如何使函数不可重复，这样它就不会对所有内容进行排队继续fadeTo直到一切完成？

4. (最重要的)如何让word不继承图像的不透明度？

   $(document).ready(function(){
       $('#classic').mouseenter(function(){
           $('#classic').fadeTo('slow', 0.25)
       {
           $('#classic').append("Classic");
           $("Classic").fadeTo('slow', 1);
       };
       });
   
       $('#classic').mouseleave(function(){
           $('#classic').fadeTo('slow', 1);
           {
               $('#classic').empty();
           };
       });
   });
   

Answer 1

首先，确保 (a) 具有 id="classic" 的元素不是 img - 因为 imges 不应该有子元素 - 或者 (b) 您在 img 之后添加文本，而不是将其附加到其中。我假设有一个带有 id="classic" 的 div，它有一个 img 子元素:

1)你说得几乎是对的。要使单词在图像淡出后淡入，您需要使用回调函数。其语法为:

$('#classic').fadeTo('slow', 0.25, function() {
    // now the fading is done!
});

不是

$('#classic').fadeTo('slow', 0.25)
{
    ....
}

您可能还需要添加 opacity: 0 作为添加到 DOM 的文本的初始值，以便随后可以将其淡入。

2) jQuery 有一个专门用于此目的的函数，称为.stop()。每当您需要停止动画排队时调用此函数。因此将上面的内容更改为:

$('#classic').stop().fadeTo('slow', 0.25, function() {
    // now the fading is done!
});

3) 在 CSS 中，所有元素都从其父元素继承不透明度。最简单的解决方法就是使添加的元素成为透明元素的同级元素(或任何其他 DOM 元素)，而不是子元素。然后使用负相对定位将其粘贴在透明元素上。所以，假设这个结构:

<div id="classic">
    <img src="myPicture" />
</div>

你会使用这个 jQuery:

$('#classic img').stop().fadeTo('slow', 0.25, function() {
    $('#classic').append("<span>Classic</span>");
    $("#classic span").fadeTo('slow', 1);
});

仅使图像淡出和淡入，因此其同级图像不受影响。在 CSS 中:

#classic span {
    display: inline-block;
    opacity: 0; /* make it 0 initially so we can fade it in */
    position: relative;
    top: -48px; /* or whatever value */
    left: -88px; /* or whatever value */
}

这是合并后的 jQuery:

$('#classic').mouseenter(function () {
    $('#classic img').stop().fadeTo('slow', 0.25, function() {
        $('#classic').append("<span>Classic</span>");
        $("#classic span").fadeTo('slow', 1);
    });
});

$('#classic').mouseleave(function () {
    $('#classic img').stop().fadeTo('slow', 1, function() {
        $('#classic span').remove();
    });
});

这是一个JSFiddle 。希望这有帮助!