0

我对jQuery不太了解，也许这很简单......我正在这个网站上工作：

http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html

单击右侧面板中的链接，例如大西洋酒店、圣布雷拉德湾酒店或俱乐部酒店及水疗中心，向下滚动页面并点亮相应的 DIV，没问题。这是通过以下 jQuery 完成的：

<script>
$(document).ready(function() {
    $("a.anchorHL").anchorAnimate()
});

$(document).ready(function() {
$("a.anchorHL").anchorAnimate().click(function() {
$('.venuedivhighlight').removeClass('venuedivhighlight');

$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('venuedivhighlight');

});
});

</script>

场地divhighlight的CSS如下：

.venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}

黄色渐变是使用动画 GIF 完成的。我知道 jQuery 可以实现这种动画效果，但我无法让它工作，所以为了节省时间，我使用它作为一种解决方法。

使用 Firefox 可以完美运行，但是对于所有其他浏览器，所选场地将突出显示一次，然后随着随后的点击和滚动，动画背景将不会重新加载。我注意到，当将上面的 CSS 设置为红色背景时，它可以在所有浏览器上看到（在 FF 中，红色出现在动画之后，而在其他浏览器中，红色立即出现）。

关于如何让每次点击都刷新 GIF 的任何想法？

在旁注中，我希望在黄色框中有更多的填充，即当突出显示发生时，文本周围有更多的空间。这在大多数浏览器中都很好，但即使添加几个像素的填充，整个事情在 IE8 和 9 中都会显示为一团糟（在早期版本中，令人沮丧的是它看起来很完美）。是否有任何人都知道的新的 IE 填充问题解决方法？

提前谢谢了。

克里斯

适应设计

4

1 回答 1

1

要回答您的第一个问题，我认为您最好的选择可能是坚持您的原始计划并使用 jQuery 为颜色设置动画。您最有可能遇到的问题是 jQuery 不能开箱即用。为了使颜色动画化，您需要来自 jQueryUI 的 Effects 库。在这里查看他们的文档：http: //jqueryui.com/demos/animate/

因此，首先，您将下载一个包含效果库的自定义 jQueryUI 包并将其添加到页面中，然后尝试以下操作：

$(function() {
    $("a.anchorHL").anchorAnimate().click(function() {
        $('.venuedivhighlight').removeClass('venuedivhighlight');
        var $el = $('a[name=' + $(this).attr('href').substring(1) + ']').next();

        // No need to set the class if the sole purpose is just to animate it later...
        $el.css({ backgroundColor: '#ff0000' });

        // Here's the magic
        setTimeout(function() {
            $el.animate({ backgroundColor: '#fff' }, 3000);
        }, 3000);
    });
});

要回答您问题的第二部分，如果您想在 .ad-basic-celldiv 的边缘周围添加一个 5px 的填充，您需要从宽度中减去至少 10px 才能这样做：

.ad-basic-cell {
    width: 205px;
    float: left;
    padding: 5px;
}
于 2011-10-13T17:31:21.433 回答