单击链接时滚动并突出显示Div

Question

我正在尝试突出显示包含联系表单的div，以便用户知道去哪里联系。我的链接将是这样的

<a href="#form" class="contacthighlight">Contact Us</a>

上课，因为这将在两个地方的网站上使用。

现在#form的当前背景是＃f5f5f5所以我想做的就是像＃ff0000一样随机闪现颜色然后慢慢淡出＃f5f5f5

Answer 1

demo on dabblet.com

应用于滚动到的元素的目标伪类。 将此添加到您的CSS：

<强> CSS：

#form {
    background-color: #f5f5f5;
}

#form {
    background-color: #f5f5f5;
}

#form:target {
    animation: target-fade 1s 1;
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

HTML标记：

<a href="#form"> link to target #form</a>
<form id="form">
    …
</form>

<强> PS： 根据{{​​3}} CSS属性：caniuse.com需要供应商前缀，例如：

.box_animation:hover {
  -webkit-animation: myanim 1s infinite; /* value is demo only */
     -moz-animation: myanim 1s infinite;
       -o-animation: myanim 1s infinite;
          animation: myanim 1s infinite;
}

@-webkit-keyframes myanim {…}
@-moz-keyframes myanim {…}
@-o-keyframes myanim {…}
@keyframes myanim {…}

PPS： dabblet 使用animation and keyframes JS库粘贴所有必需的前缀。如果没有此库，您可以在prefix free

上看到所需的前缀语法

Answer 2

您可以使用Ariel Flesler的ScrollTo jQuery Plugin滚动动画。

要使用动画更改颜色，请使用jQuery Color Animation Plugin

例如

$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});

编辑

如果你想淡化它，你可以使用切换功能。

   $('selector').scrollTo( '520px', 800 )
   .toggle(function() {
   $(this).animate({ 
     {backgroundColor:'#ff0000'}, {duration:5000,queue:false});
   },
   function() {
   $(this).animate({
     {backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
   });