如何使用 jqueryui 创建自定义工具提示动画?
How to create custom tooltip animation with jqueryui?
我有一个附有工具提示的输入框。我还有一个下拉菜单,可以从工具提示的多个显示动画中进行选择。我需要做的是创建一个将显示工具提示的自定义动画,并将其移动到文本框的整个长度,然后 return 将其移动到开头。如何使用我已经创建的工具提示来实现此目的?
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/
您可以使用 open(event, ui) event to achieve that. Check out the 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 {/* ... */}
我有一个附有工具提示的输入框。我还有一个下拉菜单,可以从工具提示的多个显示动画中进行选择。我需要做的是创建一个将显示工具提示的自定义动画,并将其移动到文本框的整个长度,然后 return 将其移动到开头。如何使用我已经创建的工具提示来实现此目的?
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/
您可以使用 open(event, ui) event to achieve that. Check out the 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 {/* ... */}