0

我知道，这是一个多么沉重的问题。上周五，这个确切的脚本在所有相关页面上都有效：

$('.textBoxes img').bind('showText',function(e) {
  $(this).fadeIn(1100,function(){
    // this is the callback after the fadein
    // here we want to wait (use a timeout)
    var next = $(this).next();
    if (next.length)
      setTimeout(function() {
        // before the next text is shown
        next.trigger("showText");
      }, 2500);
  })
}).eq(0).trigger('showText');

有效的示例html：

<div class="textBoxes">
<img src="/sites/all/themes/hr_microsite/images/sma-philo-copy-1.png" alt="" class="smaPhiloCopy1">
<img src="/sites/all/themes/hr_microsite/images/sma-philo-copy-2.png" alt="" class="smaPhiloCopy2">
</div>

...以及最初隐藏文本的 css：

.smaPhiloCopy1, .smaPhiloCopy2, .historyCopy1, .historyCopy2, .historyCopy3, .natureCopy1, .natureCopy2, .homesCopy1, .homesCopy2, .homesCopy3, .stayingPowerText1, .stayingPowerText2, .stayingPowerText3, .ourStandardsCopy1, .ourStandardsCopy2, .ourStandardsCopy3, .organizationText1, .organizationText2, .cityCopy1, .cityCopy2, .cultureCopy1, .cultureCopy2, .cultureCopy3, {
display:none;
}

所有图像都是具有透明度的 png，并且绝对位于父 div 中。

所以我有多个页面，其中包含该类的 div 和各种图像。脚本应该在每个图形中逐渐消失，一次一个，并在每个图像之间延迟。

我今天早上进来，点击一个网址，现在所有图像都在屏幕上。丝毫不褪色。在任何浏览器中都没有错误。

在萤火虫中，我在控制台中运行它，它在页面加载时一切正常：

$('.textBoxes img').css('display','none');

$('.textBoxes img').bind('showText',function(e) {
  $(this).fadeIn(1100,function(){
    // this is the callback after the fadein
    // here we want to wait (use a timeout)
    var next = $(this).next();
    if (next.length)
      setTimeout(function() {
        // before the next text is shown
        next.trigger("showText");
      }, 2500);
  })
}).eq(0).trigger('showText');

我已经清除了 Drupal 和浏览器中的缓存，但我不明白为什么这不起作用。我没有对 html、css 或 jquery 文件或图像进行任何更改。很奇怪？

额外的服务器注意：这并不意味着什么，但服务器本身不同步，所以我的文件有一周前的日期，尽管它们在我上传时被替换，并且在 Firebug 中我可以检查脚本和 css 和看到最新的文件已上传。以防万一有人对此有所了解。

4

1 回答 1

0

In order for it to work you need to remove the trailing , just before the opening { in your CSS line:

.smaPhiloCopy1, .smaPhiloCopy2, .historyCopy1, .historyCopy2, .historyCopy3, .natureCopy1, .natureCopy2, .homesCopy1, .homesCopy2, .homesCopy3, .stayingPowerText1, .stayingPowerText2, .stayingPowerText3, .ourStandardsCopy1, .ourStandardsCopy2, .ourStandardsCopy3, .organizationText1, .organizationText2, .cityCopy1, .cityCopy2, .cultureCopy1, .cultureCopy2, .cultureCopy3, {
    display:none;
 }

Change to

.smaPhiloCopy1, .smaPhiloCopy2, .historyCopy1, .historyCopy2, .historyCopy3, .natureCopy1, .natureCopy2, .homesCopy1, .homesCopy2, .homesCopy3, .stayingPowerText1, .stayingPowerText2, .stayingPowerText3, .ourStandardsCopy1, .ourStandardsCopy2, .ourStandardsCopy3, .organizationText1, .organizationText2, .cityCopy1, .cityCopy2, .cultureCopy1, .cultureCopy2, .cultureCopy3 {
    display:none;
}

(I removed the trailing comma just before the { which makes your CSS invalid.)

于 2013-08-05T17:37:31.563 回答