javascript - 如何使用 jqueryui 创建自定义工具提示动画？

Question

我有一个输入框，上面附加了一个工具提示。我还有一个下拉菜单，可以从工具提示的多个显示动画中进行选择。我需要做的是创建一个自定义动画来显示工具提示，并将其移动到文本框的长度上，然后返回到开头。如何使用我已经创建的工具提示来实现此目的？

HTML:

<select id = "dropMenu">
    <option value="">Choose animation</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="fold">Fold</option>
    <option value="scale">Scale</option>
    <option value="custom">Custom</option>
</select><br><br>
    <label>Name:</label><br>
    <input type="text">

CSS:

body{
    margin-left: 40px;
    margin-top: 20px;
}

.ui-tooltip {
    width:70px;
    background: #000;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid white;
    border-radius: 25px;
    padding: 0;
    opacity: 1;
}

.ui-tooltip-content {
    position: relative;
    padding: 0.75em;
    padding-left: 1em;
    padding-right: 1em;
}

.ui-tooltip-content::before {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    bottom: -13px;
    left: 22px;
    border-color: #FFF transparent;
    border-width: 13px 13px 0;
}

.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    bottom: -10px;
    left: 25px;
    border-color: #000 transparent;
    border-width: 10px 10px 0;
}

JavaScript:

$(function(){
    $("input").tooltip({
        position: { my: "left-34 bottom-25", at: "left" },
        items : "input",
        content: "NAME"
    });
});
$("#dropMenu").on("change", function() {
    var animation = $(this).val();
    if(animation == "custom"){
        //NEED TO MAKE A CUSTOM ANIMATION HERE
        $("input").tooltip({
            show: {effect: "fade", duration: 100},
            hide: {effect: "fade", duration: 100}
        });
    }
    else {
        $("input").tooltip({
            show: {effect: animation, duration: 500}
        });
    }
});

这是我的进度的一个jsfiddle，唯一剩下的就是自定义动画。 http://jsfiddle.net/hxm4780m/

Answer 1

您可以使用open(event, ui) 事件来实现这一目标。查看fiddle 演示。

代码

if (animation == "custom") {

        var $input = $('input');
        $input.tooltip({
            open: function (event, ui) {
                ui.tooltip.animate({
                    left: $input.width()
                }, 500, function () {
                    ui.tooltip.animate({
                        left: 5
                    }, 500);
                });
            },
            hide: {
                effect: "fade",
                duration: 100
            }
        });
    } else {/* ... */}