使用Jquery在不破坏文本流的情况下用图像替换一个字母

对象：我有一个标题，我只想用图像徽标替换其中的一个字母

问题：在使用

后，它以某种方式破坏了我的设计，我的意思是它会断线，不能正确替换字母，但会出现在其他地方。我知道这是定位问题，但很多方法都直接失败了。有人有主意吗

我的脚本非常基本：

<script type="text/javascript">
      $(function() {
            $('#logo span').fadeOut(7000);
            $('#logo span 2').fadeIn(2000);
      });
    </script> 

$（函数（）{
$（#logo span'）。淡出（7000）；
$（#logo span 2'）。fadeIn（2000）；
});

我的css：

 <style>
     #logo .span 2 {display:none}
    </style>

#logo.span 2{显示：无}

我的html：

<!-- Header & Call to Action Area -->
<div id="logo"><a href="index.html">Mundo<img class="logo" src="pictures/logos/logo_mundo_krone_header.png" width="100" height="56" alt="logo kundo gourmet puerto varas,restaurant puerto varas,puerto varas lujo,extravagante puerto varas" /><br />Gour<span><span class="2"><img src="pictures/logos/logo_mundo_krone_header.png" width="100" height="56" /></span>m</span>et</a></div>

啊……我知道这里出了什么问题。你说的是
span 2
，字面意思是。这不是有效的选择器。你需要做的是以下几点

$('#logo span').eq(0).fadeOut(7000);

jQuery使用基于零的索引。这里我们告诉jQuery我们希望第一个跨度淡出

$('#logo span').eq(1).fadeIn(2000);

在这里，我们告诉第二个跨度逐渐消失

一般来说，使用
回调函数将这些类型的效果组合在一起

$('#logo span').eq(0).fadeOut(7000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(2000);
});

作为对将来来这里的人的补充

我使用了jQuery的
.eq（）
作为sizzle选择器，而不是jQuery的
：eq（）
作为jQuery选择器。原因是，
sizzle选择器
可以利用
querySelectorAll（）
方法，其中纯
jQuery选择器
必须遍历DOM才能找到元素。虽然对于上面的例子，这可能不会带来太多的节省，但总的来说，如果您进行了大量的遍历，这一关键注意事项很重要。
能否请您在JSFIDLE上制作一个模型，以便我们能够更清楚地看到您是如何处理此设计缺陷的？我说缺陷，因为这听起来像是用锤子敲打我的脚趾。哈哈哈，是的，我明白了！对，我以前试过，但菲德尔不发球。我想那是因为它和图片一起工作。但我不太确定。这个小提琴对我来说是很新鲜的。我想这与定位有关，必须通过css来解决。但我的想法已经没有了！这是小提琴。那么，在上面的小提琴中，根据图像的位置，你想改变什么？可以说，什么是“中断”？显然，你想把图像插入到文本的中间，否则就没有了。那么到底是什么问题呢？嗯，在#徽标span 2内，我希望在span标记（仅一个字母）淡出时（交叉淡出）或淡出后在图片中淡出。相反，当span 2立即出现并消失时，会出现一些奇怪的行为。真奇怪，也许我完全被误导了！啊…我知道这里出了什么问题。你说的是
span 2
，字面意思是。这不是有效的选择器。你需要做的是瞄准第二个span，
$（“#logo span:eq（1）”
是正确的选择器。伙计，thx很多，我一直在阅读，我真的承认这远远超出了我的能力。我现在明白了动作的美妙之处，但我该如何用css来引导它呢。eq（0）y eq（1）从css中获取的确切信息是什么？我如何正确地将其链接到相应的html？你能再清楚一点吗？谢谢你的帮助！非常感谢！好吧，我的css中有一个拼写错误，我根本没有看到。Thx很多，难以置信的这种技术。学会了一件大事！非常感谢你！哦，有一个问题，我似乎明白了：我是否只使用span，而这个函数的目标是acording div中的第二个span。这意味着除了div的span类之外，我在css中不确定任何其他类。好吧，我必须深入研究一下。这很有趣。在上面，我们正在搜索Id为
logo
的任何元素中的所有pan。每个跨度都有一个
索引值
，该值基于
0
。当我们执行
.eq（0）
时，这是在该元素中找到的第一个span
。此后，每一个递增的数字都以后续项目为目标
.eq（1）
=第二个元素，
.eq（2）
以第三个元素为目标
.eq（3）
以foruth元素为目标，依此类推。请记住，这些是基于
0的选择器
。