Question

我有一个列表，每个LI元素上都有删除按钮。单击“删除”按钮时，删除具有淡出效果的LI元素。

这是我的代码。

<ul data-role="listview" data-inset="true" data-icon="false" class="recentList">
    <li>
        <a href="#" class="showDetail"> 
            <h2>  
                <p class="txtName">
                    Title 
                </p>  
            </h2>  
        </a> 
        <p class="expand">                
            Details
        </p>
        <button class="delete" data-inline="true">Delete</button>
    </li>
    <li>
        <a href="#" class="showDetail"> 
            <h2>  
                <p class="txtName">
                    Title 
                </p>  
            </h2>  
        </a> 
        <p class="expand">                
            Details
        </p>
        <button class="delete" data-inline="true">Delete</button>
    </li>
</ul>



<script>
$(".recentList").on('click', '.delete', function () {
                $(this).fadeOut(300, function(){ 
                $(this).parent().remove(); 
                });
        });
</script>

问题是当我点击删除按钮时，LI元素不会产生淡出效果。

我该如何解决？

这里是DEMO - http://fiddle.jshell.net/5zDVQ/

Answer 1

您实际上是想淡出button，但您的目标是淡出父li权利。因此，您最初必须使用closest，而不是使用$(this)

尝试，

    $(".recentList").on('click', '.delete', function () {
            var cache = $(this).closest('li');
            cache.fadeOut(300, function(){ 
               cache.remove(); 
            });
    });

DEMO

Answer 2

您可以使用fadeOut()代替remove()

$(".recentList").on('click', '.delete', function () {
    $(this).fadeOut(300, function () {
        $(this).parent().fadeOut();
    });
});

<强> Updated Fiddle

Answer 3

你可以试试这个

 $(".recentList").on('click', '.delete', function () {
     $(this).parent().fadeOut(300);
 });

基本上不是单独淡出，而是fadeOut父母

<强> fiddle

Answer 4

这里给出了以毫秒为单位的淡出时间，观察动画你应该增加一点。

此外，您对按钮和删除父项生效，效果更加明显，您应用于父元素。

Here is Demo

 $(".recentList").on('click', '.delete', function () {
     $(this).parent().fadeOut(1000, function () {
         $(this).remove();
     });
 });

jquery淡出并删除LI元素

4 个答案:

DEMO