是否可以设置替换列表视图的一部分的动画

Question

我有一个由两部分组成的列表：

<ul data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">
        <li>
            <a style="padding-top:0">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
            <a href="http://some address" ></a>
        </li>

我想做的是，当用户单击一行左侧部分的任何位置时，我想播放一个音频文件（使用html5标记），并删除该部分中的文本，用播放音频的音频控件替换。当用户停止音频时，我希望一切恢复原状。

我是JQuery和JQueryMobile的新手，不知道从哪里开始。

理想情况下，如果音频控件出现时有可能，如果可以有某种翻转动画，即行的那一部分旋转，一侧是音频控件，另一侧是文本，那就太好了。这样的事情可能吗？

TIA

Answer 1

您可以在li中嵌套您想要的任何内容，因此您只需在其中放置两个div容器，然后绑定到相应的事件，并在此基础上显示和隐藏它们。

例如：

标记：

<ul id="parentUL" data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">
        <li>
            <a  style="padding-top:0">
                <div class="txtCnt">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
                </div>
                <div class="audioCnt displayNone">
                    <h1>Audio Controls</h1>
                </div>
        <a href="http://some address" ></a>
    </li>
    </ul>

JavaScript:

$('#parentUL').on('click', '.txtCnt', function () {
    $(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
    $(this).hide().parent().find('.txtCnt').show();
});