15

我发现自己陷入了困境：

我有一个指向<a>内部 a的锚链接div，因此页面一直向下滚动到它。

不幸的div是，它位于页面底部，因此用户很可能看不到它。

我认为解决此问题的一个好方法是在单击链接时更改 div 的类，例如将边框颜色切换为红色，然后在 2 秒内恢复正常。

我不知道如何做到这一点。我用谷歌搜索了一下，似乎这可以用 jQuery 完成，但我真的不明白如何根据我的需要编辑脚本。

非常感谢！

4

5 回答 5

11

三种选择：

第一个 - CSS3

如果您并不真正关心支持所有浏览器，请使用此方法。它是纯 CSS，所以这是一个优势。这是一个大纲（包括多个浏览器的多个版本的规则）：

.youranchorsclass:active ~ #yourdivsid { /*when the anchor is active (clicked)*/
   -moz-animation: myanimation 1s;
   -webkit-animation: myanimation 1s;
   -o-animation: myanimation 1s;
   animation: myanimation 1s;
}
@-moz-keyframes myanimation, @-webkit-keyframes myanimation, @-o-keyframes myanimation, @keyframes myanimation {
   from { background: red; }
   to { background: white; /*or whatever it was originally*/ }
}

（如果你想摆脱所有那些丑陋的前缀规则，看看PrefixFree）。

第二个——jQuery

如果您确实关心旧浏览器的支持，请使用此选项。在您的页面中包含 jQuery，首先，将其插入您的head：

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type = "text/javascript"></script>

然后：

$(".yourlink").click(function() {
   $("#yourdivid").css("background", "red").delay(1000).css("background", "white");
};

请注意，此 jQuery 方法不会逐渐改变颜色，您必须包含一个插件（例如jQuery UI）才能这样做。

第三个——纯 JavaScript

如果您不想仅仅为了这么小的效果而包含一个相对庞大的库，请使用它。这很简单，这里有一个注释大纲可以帮助您入门：

function changeDivColor(color) {
    document.getElementById("yourdivid").style.backgroundColor = color;
}
document.getElementById("youranchor").onClick = function() { //when the anchor is clicked
    changeDivColor("red"); //chang the div color to red
    setTimeout(function() { //wait 1000 milliseconds (1s) -- see below
        changeDivColor("white"); //then change it back to white
    }, 1000);
};

希望以任何方式有所帮助！

于 2012-10-07T17:28:06.113 回答
10

是的，您可以通过两种方式进行黄色渐变技巧：

使用:target伪类：

<section id="voters"> 
   Content
</section>

各自的CSS

:target {
   background: yellow;
}

使用黄色渐变技术

在点击功能中，如果有，可以这样操作：

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).effect("highlight", {}, 1500);
});

或使用animate()：

$('a[href*="#"]').click(function(){
    $($(this).attr("href")).animate({"background-color": "#ffc"}).delay(2000).animate({"background-color": "transparent"});
});

小提琴：http: //jsfiddle.net/HnERh/

PS：为了使用 effect()，你需要有这两个 JS: effects.core.js 和 effects.highlight.js.

于 2012-10-07T17:23:06.093 回答
2

单击时，您可以将 div 的颜色更改为 red .css({ elements })，然后等待 2 秒.delay( time ) 并动画回原来的颜色.animate({ elements }, time, callback)

$(document).ready() {
    $('a[href^="#"]').click(function(){
        $('div.divs_class_or_id_name').css('border','solid 1px #ff0000').delay(2000).animate({
            border: 'solid 1px #000000'
        }, 500, function() {
            // animation complete
        });
    });
};
于 2012-10-07T17:26:39.557 回答
1

类似于以下内容。

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#element").offset().top
    }, 2000);
    $("#element").animate({
        "background-color": "#FFFFCC"
    }).delay(2000).animate({
        "background-color": "#00FFFF" //original background color
    });
});

确保包含一个允许颜色动画的 jquery 插件，例如http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js。

尽管@praveen-kumar 的:target解决方案看起来不错，但我相信您可以纯粹使用 css3 动画来做到这一点。

于 2012-10-07T17:23:38.327 回答
1

@Chris 的纯 CSS 解决方案很棒。对~我不起作用（可能只适用于兄弟姐妹）

这是一个经过测试并在 2021 年有效的变体：

#targetdivid:target { /* i.e when this element is navigated to (from a link) */
   animation-name: ref-animation;
   animation-duration: 3s;
}
@keyframes ref-animation {
   from { background-color: #FFFFCC;     }  /* light yellow */
   to   { background-color: transparent; }  /* assuming original was transparent */
}
于 2021-01-14T09:08:06.360 回答