Question

对象：我有一个标题标题，我只想用一个带有图像标识的字母替换它。

问题：使用<span>后，它会以某种方式破坏我的设计，我的意思是它会破坏线条，不能正确替换字母，而是出现在其他地方。我知道这是定位，但很多方法都直接流失了。有人有想法吗？

我的剧本，非常基本：

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

我的css：

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

我的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>

Answer 1

啊......我看到这里有什么问题。你在字面上说span 2。那不是一个有效的选择器。您需要做的是以下几点。

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

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

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

在这里，我们告诉第二个跨度淡入。

一般来说，使用callback functions将这些类型的效果组合在一起。

$('#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()这是一个嘶嘶声的选择器，而不是jQuery的:eq()，这是一个jQuery选择器。原因是sizzle selectors可以利用querySelectorAll()方法，其中纯jQuery selectors必须遍历DOM才能找到元素。虽然对于上面的例子，这可能不会带来太多的节省，总的来说，如果你做了很多遍历，这个关键注释很重要。

使用Jquery用图像替换一个字母而不破坏文本流

1 个答案: