如何在过渡中用图像替换href链接

【问题标题】：how to replace a href link with image in transitions如何在过渡中用图像替换href链接
【发布时间】：2014-11-06 09:37:59
【问题描述】：

我想用图像替换这个href链接，所以我只想制作移动图像而不是链接，很容易，用“img src”替换“a href”，移动是由“onclick”javascript触发的，你能帮忙吗我？如果我这样做，动画不起作用，所以我知道如何，继承人 Jsfiddle：http://jsfiddle.net/px7ezeka/

 <!DOCTYPE html>
<html lang="cs-CZ">
<head>
    <meta charset="UTF-8" />
    <meta name="generator" content="Prace">
    <link rel="stylesheet" href="Web9.css">
    <title>Rostik</title>
</head>
<body>
    <div id="links">
        <a class="link" href="#">bullshit</a>
    </div>
    <script>
        document.querySelector('.link').onclick = function () {
            var d = document.getElementById("links");
            d.className = d.className + " fly";
        }
    </script>
</body>
</html>


#links.fly {
    position: absolute;
    margin-left: 400px;
    transition: all 2s ease-out;
}

【问题讨论】：

可以jsfiddle.net/px7ezeka/1 吗？

标签： javascript html css onclick transitions

【解决方案1】：

如果你想在点击它时将文本替换为图像，试试这个：

HTML

<div id="links">
    <a class="link" href="#">bullshit</a>
    <img src="" class="hide image" />
</div>

JAVASCRIPT

document.querySelector('.link').onclick=function() {

            var d = document.getElementById("links");
            d.className = d.className + " fly";  
            $(".image").toggleClass("hide");
            $(".link").toggleClass("hide");
        }

CSS

#links.fly {
    position: absolute;
    margin-left: 400px;
    transition: all 2s ease-out;
}
.hide{
    display:none;
}

它隐藏你的文字并显示你想要的图像。

Demo in FIDDLE

【讨论】：