[英]Jquery hover and display back the full title
I currently create a toggle div, when the div not hover the long title will automatically show ...
for the rest characters more than 30, So far I have successfully created the ...
function . 我目前正在创建一个切换div,当div不悬停时,长标题将自动显示
...
对于其余30个以上的字符,到目前为止,我已经成功创建了...
函数。
I need when hover the div the long title will show exactly the long title full text. 当悬停div时,我需要长标题将完全显示长标题全文。
JS 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();
});
});
For example : 例如 :
full text long title : testingtestingtestingtestingtesting123 全文长标题: testingtestingtestingtestingtesting123
long title : testingtestingtestingtestingtesting... 长标题: testingtestingtestingtestingtesting ...
when hover it show testingtestingtestingtestingtesting123 悬停时显示testtestingtestingtestingtesting123
mouseout: testingtestingtestingtestingtesting... again mouseout:再次进行testtestingtestingtestingtesting ...
You have to cache your text like this: 您必须像这样缓存文本:
$('#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();
});
The syntax is this: 语法是这样的:
$(elem).hover(fn, fn);
first fn
gets executed when you hover the element and second fn
is executed when you mouse out of the element. 第一
fn
当你悬停元素和第二被执行fn
执行,当你鼠标移出元素。 it is just mouseenter, mouseleave. 它只是mouseenter,mouseleave。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.