jQuery toggle mouseover/enter & mouseout with a simple function
I have html.
<p class="textlimity" title="heyheyhey"> asd</p>
now in js i would like to toggle the textlimity text() on mouseover and mouseout so i written.
var textlimity = "";
var texlimity_temp = "";
$(document).ready(function(){
$('.textlimity').live('mouseenter',function(){
textlimity = $(this).attr("title");
textlimity_temp = $(this).html();
$(this).html(textlimity);
}).live('mouseout',function(){
setTimeout(function(){console.log(textlimity_temp);$(this).html(textlimity_temp); },200);
});
});
logic is simple: on mouseover the .textlimity title="" val() replaces the .textlimity
.html() , and do the opposite on mouseoutI used .html() cause i开发者_运维技巧 could have both plain text or html code inside both title="" or
any suggest?Here is and adaptation of @David's code with all issues resolved..
$('.textlimity').live('mouseenter', function() {
var self = $(this);
clearTimeout( self.data('restore') );
if (!self.data('saved')) {
self.data('saved', self.html()); // store the original content
}
self.html(this.title); // set content from title
}).live('mouseout', function() {
var self = $(this);
self.data( 'restore', setTimeout(function() {
self.html(self.data('saved')); // revert to the stored content
}, 200) );
});
demo at http://jsfiddle.net/gaby/dQTDZ/4/
Looks a bit complicated. How about:
$('.textlimity').live('mouseenter',function(){
$(this).data( 'saved', $(this).html() ) // store the original content
.html( this.title ); // set content from title
}).live('mouseout',function(){
setTimeout(function() {
$(this).html( $(this).data('saved') ); // revert to the stored content
}, 200);
});
Fiddle: http://jsfiddle.net/dQTDZ/
精彩评论