Question

所以我在列表中有几个东西，当我鼠标悬停在它们上面时，我有一组应该显示的按钮，当我取消鼠标悬停时它会再次隐藏。到目前为止，我写的jQuery是这样写的：

    $('li.mine > div').hover(function () {
        $(this).children('span.button-pane').stop().show('clip', 200);
    }, function () {
        $(this).children('span.button-pane').stop().hide('clip', 200);
    });

如果用户将鼠标移过，然后完全移出，则效果很好。但是，如果用户将鼠标直接安装到li.mine的另一个div子节点，它将显示新按钮并且不会隐藏旧按钮。如何在显示新按钮窗格之前隐藏前一个按钮窗格？

编辑：这是一些HTMl

<li id="list_g236c167c6515484db1a424867cdcb2cb" class="group mine ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">Random Group A</span>
        <span class="button-pane align-right" style="float: right; display: block; ">
        <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
            <img data-bind="reminderModal: Reminder" class="float-right hand-cursor reminder-button" src="/Content/images/reminder.png">
        </span>
    </div>
    <ol>
        <li id="list_oc647c84fba4c4f5d91f8fdeccb538811" class="no-nest mine ">
            <div>
                <span class="itemText" data-bind="textToTextbox: Description">Random Objective 1</span>
                    <span class="button-pane align-right" style="float: right; ">
                    <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
                </span>
                <input type="text" style="display:none" class="itemTextBox">
            </div>
       </li>

       <li id="list_o42c8f0ab4839468b86996f3a3fcff4fa" class="no-nest mine ">
            <div>
                <span class="itemText" data-bind="textToTextbox: Description">Random Objective 2</span>
                <span class="button-pane align-right" style="float: right; display: block; ">
                <img onclick="JOURNAL.functions.deleteItem(this)" class="float-right hand-cursor delete-button" src="/Content/images/deletered.png" height="18" width="18">    
                </span>
                <input type="text" style="display:none" class="itemTextBox">
            </div>
       </li>

    </ol>
</li>

Answer 1

问题是因为跨度仍然是动画。 jQuery使用类ui-effects-wrapper将pan平移到另一个span中，同时它是动画。因此，如果它仍然是动画，我们需要抓住这个事实，并将其隐藏在ui-effects-wrapper下，如下所示：

$('li.mine > div').hover(function () {
        if ($(this).children('.ui-effects-wrapper').length > 0) { // we're still animating!
            $(this).children('.ui-effects-wrapper').children('span.button-pane').show('clip', 200);
        }
        $(this).children('span.button-pane').stop().show('clip', 200);
    }, function () {
        if ($(this).children('.ui-effects-wrapper').length > 0) { // we're still animating!
            $(this).children('.ui-effects-wrapper').children('span.button-pane').hide('clip', 200);
        }
        $(this).children('span.button-pane').stop().hide('clip', 200);
    });

jQuery ui un-hover并不总是开火

1 个答案: