使用jQuery实现内联文本元素的交叉淡入淡出
使用jQuery实现内联文本元素的交叉淡入淡出
提问于 2012-07-08 16:41:53
我正在寻找一种方法，以适当的动画/交叉淡入淡入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中所看到的。
如果你有任何建议，我将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-08 17:06:05
这是我想出来的：
$('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一起工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11384834
复制相关文章
相似问题
如何获取-抑制WebSphere MQ队列？
如何从WebSphere MQ监控现有队列？
WebSphere MQ队列创建
将Websphere 5.1 MDB连接到JBoss MQ队列
使用Ruby连接到Websphere MQ队列进行测试
腾讯云开发者
