jQuery -在悬停时将图像准备给父div
目标是让动画出现在鼠标上方，然后消失在鼠标上。在jQuery中使用WordPress，因此没有冲突的标签。
什么管用？FadeTo在悬停和添加/删除额外的类。这是按项目计算的。
什么不可以呢？我已经在悬停时得到了精确的新图像，但是在所有..entry内容的div上，在任何img.readmore上盘旋。我已经尝试过遍历DOM来查找父级(我无法很好地找到它)&我尝试过使用$( $img ).prependTo( $(this) );，它也失败了。
我希望在以下几个方面提供帮助：( a)只针对徘徊在(主要需求)上的div，以及( b)为新的JS人员整理事情的建议。
/*
* Readmore animation
*/
jQuery(document).ready(function($) {
//add readmore class to images (temp, will eventually live in markup)
$(".post-image").addClass("readmore");
//fade original image on hover
$("img.readmore").hover(
function() {
$(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
}, function () {
$(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
}
);
//prepend new image on hover
//what's our img?
var $img = $("<img src='/path/to/readmore_hover.png' style='position: absolute; left: 15%;opacity:0.7 !important' />");
//prepend new image on hover
$("img.readmore").hover(
function() {
$( $img ).prependTo( ".entry-content" );
}),
function () {
// remove img on mouseout;
}
});回答 3
Stack Overflow用户
发布于 2014-05-21 19:29:04
这将将图像传递给prependTo适当的div。
$( $img ).prependTo( $(this).closest(".entry-content") );我仍然在处理remove()函数。
编辑
我真的很喜欢Leglaw，，id，选择器来删除图像，所以在这里它是完整的！
<html>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
//add readmore class to images (temp, will eventually live in markup)
$(".post-image").addClass("readmore");
//fade original image on hover
$("img.readmore").hover(
function() {
$(this).stop();
$(this).addClass("readmore-hover").fadeTo( "slow" , 0.1 );
}, function () {
$(this).stop();
$(this).removeClass("readmore-hover").fadeTo( "fast" , 1 );
}
);
//prepend new image on hover
//what's our img?
var $img = $("<img id='inserted' src='/path/to/readmore_hover.png'" +
"style='position: absolute; left: 15%;opacity:0.7 !important' />");
//prepend new image on hover
$("img.readmore").hover(
function() {
$( $img ).prependTo( $(this).closest(".entry-content") );
},
function () {
// remove img on mouseout;
$('#inserted').remove();
})
});
</script>
<body>
<div class="entry-content">
<a href="http://google.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
<a href="http://yahoo.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
<div class="entry-content">
<a href="http://stackoverflow.com"><img class="readmore"
style="z-index:2;" src="some_image.png" /></a>
</div>
</body>
</html>添加您自己的图像到这个。
//预置的新图像在悬停函数上也有错误。第一个函数的结束大括号}的结束括号( )紧跟在它后面。它应该在第二个函数的末尾(移除图像)。
您所调用的闪烁实际上是没有告诉动画您从fadeTo()函数开始时在鼠标悬停时停止的结果。所以现在发生的是，每次你在上面盘旋的时候，你都在排队等待动画。只需在图像上运行几次鼠标，然后松开鼠标，就可以很容易地检查这一点。实际上，您将看到它遍历您放置到队列中的每一个动画。stop()只是jQuery的动画附加功能之一。
对于出现和淡出的原始图像，需要将样式设置为z-index=2;。这保持了褪色的图像在新的img面前，所以你仍然可以做点击-通过您在下面的评论中提到。
现在我真的相信这是完整的。哈哈
太棒了！
c0p
Stack Overflow用户
发布于 2014-05-21 19:10:18
该错误发生在此$( $img ).prependTo( ".entry-content" );上。选择器.entry-content将选择所有条目。您应该指定您想要的目标条目。$this当前是您正在悬停的readmore项。因此，您必须找出一个选择器来标识目标条目。
Stack Overflow用户
发布于 2014-05-21 19:33:32
为插入的图像提供一个id，以便在删除时很容易参考。然后以某种方式将图像放在前面，比如：
$("img.readmore").hover(
function() {
$( $img ).prependTo($(this));
},
function () {
$("img#inserted").remove();
}
);https://stackoverflow.com/questions/23796993
复制相似问题
腾讯云开发者
