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 - 结合克隆内容和淡入的主要内容,如果未能解决你的问题,请参考以下文章

在克隆的 JQuery UI 对话框中具有 AJAX 内容的 TinyMCE

使用带有添加和删除元素条件的 jQuery 克隆表单

jQuery的克隆方法clone()

如何将一个div的内容克隆到另一个div

jQuery UI:从原始 div 拖动和克隆,但保留克隆

JQUERY 跨 div 拖放和克隆