[英]Jquery hover and display back the full title
我目前正在创建一个切换div,当div不悬停时,长标题将自动显示...
对于其余30个以上的字符,到目前为止,我已经成功创建了...
函数。
当悬停div时,我需要长标题将完全显示长标题全文。
JS
$('#popup_survey_whitebox_content').hide();
$("label#popup_survey_label_title").text(function (index, currentText) {
var newText = currentText.substr(0, 30);
if (currentText.length > 30) newText += "...";
return newText;
});
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
// Animation complete.
}).css('position', 'relative');
$("#popup_survey_end_whitebox").click(function () {
$("#popup_survey_whitebox").remove();
});
});
例如 :
全文长标题: testingtestingtestingtestingtesting123
长标题: testingtestingtestingtestingtesting ...
悬停时显示testtestingtestingtestingtesting123
mouseout:再次进行testtestingtestingtestingtesting ...
您必须像这样缓存文本:
$('#popup_survey_whitebox_content').hide();
var orig = '', // create var to cache the original text
newText = ''; // create var to cache the new Text with "..."
$("label#popup_survey_label_title").text(function (index, currentText) {
orig = currentText;
newText = currentText.substr(0, 30);
if (currentText.length > 30) newText += "...";
return newText;
});
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
$("#popup_survey_end_whitebox").click(function () {
$("#popup_survey_whitebox").remove();
});
语法是这样的:
$(elem).hover(fn, fn);
第一fn
当你悬停元素和第二被执行fn
执行,当你鼠标移出元素。 它只是mouseenter,mouseleave。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.