如何让 jQuery 进行“重置”本身取决于一个事件? IE8 和 9 填充问题?
我对 jQuery 了解不多,也许这很简单......我正在这个网站上工作:
http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html
单击右侧面板中的链接,例如 The Atlantic Hotel、St Brelade's Bay Hotel 或 The Club酒店及Spa 会向下滚动页面并点亮相应的 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>
venuedivhighlight 的 CSS 如下:
.venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}
黄色淡入淡出是通过动画 GIF 完成的。我知道 jQuery 可以实现这种动画效果,但我无法让它工作,所以为了节省时间,我使用它作为解决方法。
在 Firefox 中,此功能完美运行,但在所有其他浏览器中,所选地点将突出显示一次,然后在随后的单击和滚动中,动画背景将不会重新加载。我注意到,当将上面的CSS设置为红色背景时,它可以在所有浏览器上看到(在FF中,红色在动画之后出现,而在其他浏览器中,红色立即出现)。
关于如何让 GIF 在每次点击时刷新,有什么想法吗?
附带说明一下,我希望黄色框中有更多的填充,即突出显示时文本周围有更多的空间。这在大多数浏览器中都很好,但即使添加几个像素的填充,整个事情在 IE8 和 9 中显示得一团糟(在早期版本中,令人沮丧的是它看起来很完美)。是否有任何人都知道的新 IE 填充问题解决方法?
非常感谢。
克里斯
适应设计
I don't know a lot about jQuery, maybe this is something simple... I'm working on this website:
http://www.adaptdesign.com/misc/jtppwg/venuedirectory.html
Clicking a link in the panel on the right, such as The Atlantic Hotel, St Brelade's Bay Hotel or The Club Hotel & Spa scrolls you down the page and lights up the respective DIV, no problem. This is done with the following 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>
the CSS for venuedivhighlight is as follows:
.venuedivhighlight {
background-image: url(images/anim-bg-fade.gif);
}
The yellow fade is done with an animated GIF. I know jQuery can achieve this animated effect but I couldn't get it working, so to save time I used this as a workaround.
With Firefox this works perfectly, but with all the other browsers the selected venue will highlight once and then with subsequent clicks and scrolls the animated background will not reload. I've noticed that when setting the CSS above to have a red background, it can be seen on all of the browsers (in FF the red appears after the animation, and in other browsers the red appears right away).
Any ideas on how I can get the GIF to refresh with every click?
On a side note I'd love a bit more padding in the yellow box, ie more space around the text when the highlighting occurs. This is fine in most browsers but when adding even a few pixels of padding, the whole thing displays as a total mess in IE8 and 9 (in earlier versions, frustratingly it looks perfect). Is there a new IE padding issue workaround that anybody knows about?
Many thanks in advance.
Chris
Adapt Design
为了回答你的第一个问题,我认为你最好的选择可能是坚持你最初的计划并使用 jQuery 为颜色设置动画。您最有可能遇到的问题是 jQuery 无法开箱即用地执行此操作。为了使颜色具有动画效果,您需要 jQueryUI 中的效果库。在这里查看他们的文档: http://jqueryui.com/demos/animate/
所以首先,你将下载包含效果库的 jQueryUI 自定义包并将其添加到页面,然后尝试如下操作:
要回答问题的第二部分,如果您想在边缘周围添加 5px 的填充你的
.ad-basic-cell
div,您需要从宽度中减去至少 10px 才能执行此操作:To answer your first question, I think your best bet might be to stick with your original plan and animate the color with jQuery. The problem you're most likely hitting is that jQuery can't do this out of the box. In order to animate color, you need the Effects library from jQueryUI. Check out their docs here: http://jqueryui.com/demos/animate/
So first, you'll download a custom package of jQueryUI that includes the effects lib and add it to the page, then try something like this:
To answer the second part of your question, if you want to add a padding of say, 5px, around the edge of your
.ad-basic-cell
divs, you'll need to subtract at least 10px from the width in order to do so: