Javascript 对两个对象进行淡入淡出

我想在我的网站上制作一个不透明度为0.5的图像，然后我想在这个图像上“弹出”一个不透明度等于1的单词。问题是，当我将image设置为任何速度时，它开始对所有函数排队的次数与我用光标进入/离开image的次数相同

单词的加载速度比带有“slow”和“slow”的图像快 单词的不透明度并没有变为1，因为它的不透明度随着 图像（设置为0.5）

如何使“word”加载晚于图像

当我在图像中移动光标时（比如10倍/秒），如何使函数不可重复，这样它就不会对所有内容和内容排队 继续fadeTo直到一切都完成

（最重要的）如何使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();
        };
    });
});

---

我已在此处更新了您的代码：

您应该在按钮上使用类。类是可以应用于多个元素的标识符。这样您就不必使用双重代码

---

我还使用了

$（this）

，这意味着您的目标是鼠标悬停的元素。

首先，确保（a）具有

id=“classic”

的元素不是

img

，因为

img

es不应该有子元素，或者（b）您正在将文本添加到

img

之后，而不是将其追加。我将假设有一个div，它带有

id=“classic”

，它有一个

img

子级：

1） 你说得差不多对。要使单词在图像淡出后淡入，需要使用回调函数。其语法为：

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

而不是

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

您可能还需要在添加到DOM的文本上添加

opacity:0

作为初始值，以便可以淡入

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').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();
    });
});

$（'#classic'）.mouseenter（函数（）{
$（'classic img'）.stop（）.fadeTo（'slow'，0.25，function（））{
$（'classic'）。追加（“classic”）；
$（“#经典跨度”）.fadeTo（'slow'，1）；
});
});
$（'#classic'）.mouseleave（函数（）{
$（'classic img'）.stop（）.fadeTo（'slow'，1，function（））{
$（'#classic span'）。删除（）；
});
});

---

这是一个例子。希望这有帮助

你能把它放在JSFIDLE或codepen上吗？内边框是图像| | | | |只为1看效果，因为我没有收到我想要的效果，我没有复制/粘贴代码到其他地方。你有一些多余的花括号，没有意义。它们会导致语法错误以及一些缺少的分号。你检查过你的控制台上的这些错误并消除了吗？嗯，我不明白你说的“你的控制台”到底是什么意思。你的意思是我应该使用console.log？因为我正在起诉记事本+，这个程序没有显示任何语法错误（或者我应该在某个地方勾选选项，让记事本显示这个错误？）。。。我其实知道这一点，这就是为什么我把所有div都放在类“option”中，但我想查看单个按钮的效果^^^^但感谢您展示了应用此效果的其他方法。两天前我刚刚开始了我的jQuery冒险，我不介意在大脑中的新jQuery抽屉中添加新选项！使用

$（此）

将为您省去很多麻烦。；-）所以基本上$（this）将始终用于它上面的一个特定函数，我猜？是的，它返回调用该方法的元素。你可以在这里读到更多：收到！谢谢你的每一个提示！我真的很感激。这是一个完美的答案，尤其是你解释一切的那部分！多谢各位@内赫尔，不客气。很抱歉，我没有看到您发布了一个篡改了实际代码的帖子。这里是一个利用我发布的一些内容来修改代码的工具：刚刚注意到你回复了！谢谢你的回复，我已经做到了，正如你在回复之前所展示的那样！虽然我还有一个问题。我怎样才能使一切同时发生？我的意思是，当有.mouseenter时，图像淡出为0.5，淡入“经典”为1。mouseleave也一样，淡入img为不透明度1，“经典”淡出为0？（已经编辑了一些在两种方式淡出后要删除的“经典”，首先是“经典”消失，然后是img淡入，第二是第一个img淡入/经典淡出）

#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 */
}

$('#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();
    });
});