jQuery - 结合克隆内容和淡入
Posted
技术标签:
【中文标题】jQuery - 结合克隆内容和淡入【英文标题】:jQuery - Combine clone contents and fadeIn 【发布时间】:2013-01-24 03:29:00 【问题描述】:我正在努力实现这个结果:
特点:
-
工具提示会在点击时立即显示。
淡入和位置动画同时开始,然后,在动画位置的同时,元素淡出。
可以同时显示多个工具提示(以防两个或多个按钮相继单击)
消息内容取自动态 JSON 对象。
我可以在点击时复制和显示工具提示,但由于某种原因无法对其进行动画处理,或替换其内容。
我不明白如何选择新的重复元素。
请参阅下面的示例错误,或 jsFiddle。
html:
<div id="ptsAlert">
<span class="ptsAlert">
message
<div class="ptsAlert-arrow"></div>
</span>
</div>
<table>
<tr>
<td class="btn">01</td>
<td class="btn">02</td>
<td class="btn">03</td>
</tr>
<tr>
<td class="btn">04</td>
<td class="btn">05</td>
<td class="btn">06</td>
</tr>
</table>
css:
h1
font-size:50px;
margin:10px;
body
text-align:center;
td
border: 1px solid;
padding: 5px;
cursor: pointer;
.ptsAlert
display:none;
background-color: #EE0000;
color: #FFFFFF;
font-size: 27px;
font-weight: bold;
line-height: 1.7em;
margin: 10px auto;
padding: 0 10px;
position: absolute;
text-align: center;
.ptsAlert-arrow
border-color: #EE0000 transparent transparent;
border-style: solid;
border-width: 8px;
bottom: -15px;
height: 0;
left: 3px;
position: absolute;
width: 0;
jQuery:
//Function to show points alerts
$('.btn').click(function(event)
var points = 10;
$('#ptsAlert').clone(true, true).contents()
.appendTo('body')
.css('top', (event.pageY - 75) + 'px')
.css('left', (event.pageX - 10) + 'px')
.css('display', 'inline-block')
//.hide().fadeIn();
);
注释行.hide().fadeIn()
产生以下错误:
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert javascript argument arg 0 [nsIDOMWindow.getComputedStyle]
【问题讨论】:
【参考方案1】://Function to show points alerts
$('.btn').click(function(event)
$('#ptsAlert').find("> span").clone(true, true)
.css('top', (event.pageY - 75) + 'px')
.css('left', (event.pageX - 10) + 'px')
.css('display', 'inline-block')
.appendTo($('body'))
.hide().fadeIn(); //this line doesn't break the code (anymore)
);
优化
var $body=$(document.body);
var $ps=$("#ptsAlert");
var $tltp = $ps.find(">span");
$body.on("click",".btn",function(event)
$tltp.clone(true, true)
.css('top', (event.pageY - 75) + 'px')
.css('left', (event.pageX - 10) + 'px')
.css('display', 'inline-block')
.appendTo($body)
.hide().fadeIn();
);
【讨论】:
以上是关于jQuery - 结合克隆内容和淡入的主要内容,如果未能解决你的问题,请参考以下文章