1

So I've got several things in a list, and when I mouse over them I have a set of buttons that's supposed to show, and hide again when I un-mouse over it. The jQuery I've written to do this, so far, looks like this:

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

This works great if the user mouses over, and then out entirely. However, if the user mouses directly to another div child of an li.mine, it shows the new buttons and doesn't hide the old buttons. How can I get it so it hides the previous button pane before showing the new button pane?

Edit: Here's some 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>
4

1 に答える 1

0

問題は、スパンがまだアニメーション化されていたためです。jQuery は、アニメーション中にクラス ui-effects-wrapper を使用してパンを別のスパンに貼り付けます。したがって、まだアニメーションしている場合は、その事実をキャッチして、次のように 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);
    });
于 2012-06-14T16:32:38.450 に答える