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}
        });
    }
});

这是我进步的一个方面，唯一剩下的就是自定义动画。 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 {/* ... */}

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

1 个答案: