我正在寻找一种方法来使用jQuery正确地动画/交叉淡化内联锚元素。块元素有几种解决方案,但内联元素到目前为止还没有。
我对每个单词的替代文字来自元素中的属性:
<a data-r="nerd">word</a>
但如果我尝试淡出,请替换文字并淡入,如下所示:
jQuery(document).ready(function($) {
$('a').click(function(index) {
$(this).fadeOut(500, function() {
$(this).text($(this).attr("data-r"));
});
$(this).fadeIn(500);
});
});
我没有得到我想要的交叉淡入淡出效果,但是在你的demo中可以看到fadein的淡出效果。
我非常感谢您提供的任何提示。
答案 0 :(得分:5)
这就是我想出的:
$('a').click(function(index) {
var clone = $(this).clone();
clone.css('position', 'absolute');
clone.css('left', $(this).position().left);
clone.css('top', $(this).position().top);
$('body').append(clone);
$(this).hide();
$(this).text($(this).attr("data-r"));
clone.fadeOut(500, function() {
clone.remove();
});
$(this).fadeIn(500);
});
a { font-size: 60px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p>
<a data-r="nerd">word</a><br>
<a data-r="dork">word</a>
</p>
但是,您可能需要对其进行调整以使用不同的line-height
。