Question

我想在我的网站上制作一个不透明度为0.5的图像然后我想＆＃34;弹出＆＃34;在这个图像上一个不透明度等于1的单词。问题是，当我以任何速度设置图像时，它开始将所有函数排队，就像我用光标进入/离开图像一样多次。

这个词加载速度快（immadietly）比图像加速慢。和这个词并没有将不透明度改为1，因此它会失去不透明度图像（设置为0.5）
如何制作＆＃34;字＆＃34;加载晚于图像？
当我将光标移动到图像（例如10x / sec）时，如何使功能不可重复，因此它不会排队所有内容继续淡出，直到一切都完成了？

（最重要的）如何使单词不从图像继承不透明度？

$(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

我在这里更新了您的代码：http://jsfiddle.net/3dytbr3m/1/

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

我也使用$(this)，这意味着你的目标是鼠标悬停的元素。

Answer 2

首先，确保（a）具有id="classic"的元素不是img - 因为img es不应该有孩子 - 或者（b）您是在img之后添加文本而不是将其附加到文本。我假设有id="classic"的div有一个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 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。希望这有帮助！

fadeTo两个对象

2 个答案: