http://jsfiddle.net/nicktheandroid/3AraQ/
当P盘旋时,#both会附加到该段落并居中。当我将鼠标悬停在一个新的段落上时,它会在第一个P上逐渐淡出并在现在悬停的P上消失。这是最好的方法吗?稍后我将使用它来允许人们点击书签图像,然后当他们悬停P时它将执行我的代码下面的操作,然后当他们点击该P时它将创建该段落的书签,但我真的只需要帮助下面的代码。谢谢!
$('p').hover(function() {
$(this).append('<span id="both">BOOKMARK THIS</span>')
$('#both').animate({opacity: 1.0})
}, function(){
$('#both').fadeOut(600, function(){
$(this).remove()
})
});
它不能顺利运行,它只是不对......
答案 0 :(得分:2)
我可能会稍微改变一下:
$('p').hover(function() {
$('<span class="both">BOOKMARK THIS</span>')
.appendTo(this)
.animate({opacity: 1.0})
}, function(){
var both = $(this).find('span.both');
both.fadeOut(600, function(){
both.remove()
});
});
我使用class
代替id
的原因是,当您离开一个段落并输入下一个段落时,您将暂时拥有其中两个span
个 - 在旧段落上淡出的段落和添加到新段落的段落。拥有两个具有相同id
的元素是无效的,并且充满了危险。
如果我回到同一段,我可能也会提前取消动画:
$('p').hover(function() {
$(this).find('span.both').stop().remove(); // Stop and remove it if it's there
$('<span class="both">BOOKMARK THIS</span>')
.appendTo(this)
.animate({opacity: 1.0})
}, function(){
var both = $(this).find('span.both');
both.fadeOut(600, function(){
both.remove()
});
});
答案 1 :(得分:2)
只需使用class而不是id:
$('p').hover(function() {
$(this).append('<span class="both">BOOKMARK THIS</span>')
$('.both').animate({opacity: 1.0})
}, function(){
$('.both').fadeOut(600, function(){
$(this).remove()
})
});
答案 2 :(得分:0)
我不认为你需要保持adidng并移除到dom。只需将范围放入style="display:none;"
,然后
$('p').hover(function() {
$(this).find('#both').animate({opacity: 1.0})
}, function(){
$(this).find('#both').fadeOut(600)
});
这不会完全奏效,您可能不得不在默认样式中混淆不透明度以获得您想要的效果。不过,不需要操纵dom。