jQuery всплывающая подсказка / консистенция

Question

Таким образом, вы работаете над сайтом, который имеет большие всплывающие подсказки с текстом и значком внутри, когда вы нажимаете кнопку. Единственная проблема заключается в том, что иногда это немного противоречиво, когда всплывающая подсказка появляется, когда вы не перевернули ее, или они застряли и не исчезают, когда должны.

Мой Jquery:

$('#main_services ul li').hover(function() {
    $('div.bubup', this).fadeIn('slow');
},
function() {
    $('div.bubup', this).hide();
});

HTML-разметка:

<div id="main_services">
    <ul>
        <li><a class="top" href="http://google.com">Button 1</a>
            <div class="bubup bi-1" style="display: none;">
                <div class="bubup-top"><div class="bubup-lip"><!-- --></div></div>
                <div class="bubup-middle">
                    <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div>
                </div>
                <div class="bubup-bottom"><!-- --></div>
            </div>
        </li>
        <li><a class="top" href="http://google.com">Button 2</a>
            <div class="bubup bi-2" style="display: none;">
                <div class="bubup-top"><div class="bubup-lip"><!-- --></div></div>
                <div class="bubup-middle">
                    <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div>
                </div>
                <div class="bubup-bottom"><!-- --></div>
            </div>
        </li>
    </ul>
</div>

Не хочу, чтобы ссылка на сайт была включена, однако при необходимости я могу выделить код и поместить его в демонстрационную ссылку.

Итак, вопрос в том, есть ли какие-то очевидные вещи, которые мне не хватает, чтобы сделать переходы красивыми и надежными?

Answer 1

Возможно, вы захотите попробовать добавить .stop(true,true) прямо перед вами .fadeIn, что может решить вашу проблему.Если этого не произойдет, мне нужно будет увидеть демонстрационную ссылку.