Javascript jQuery-悬停时将图像前置到父div_Javascript_Jquery_Wordpress_Jquery Hover

Javascript jQuery-悬停时将图像前置到父div

javascript jquery wordpress

Javascript jQuery-悬停时将图像前置到父div,javascript,jquery,wordpress,jquery-hover,Javascript,Jquery,Wordpress,Jquery Hover,目标是让一个动画出现在mouseover上，消失在mouseout上。在WordPress中使用jQuery，因此没有冲突标记什么有效？悬停并添加/删除附加类时的FadeTo。这是按项目进行的什么不可以？我已经在hover上准确地预编了新图像，但是悬停在任何img.readmore上都会触发所有.entry内容div。我已经尝试过遍历DOM来查找父对象（我无法完全找到父对象）&我尝试过使用$（$img）.prependTo（$（this））也失败了我非常感谢你的帮助 a）仅针对悬停在上方

目标是让一个动画出现在mouseover上，消失在mouseout上。在WordPress中使用jQuery，因此没有冲突标记

什么有效？悬停并添加/删除附加类时的FadeTo。这是按项目进行的

什么不可以？我已经在hover上准确地预编了新图像，但是悬停在任何img.readmore上都会触发所有.entry内容div。我已经尝试过遍历DOM来查找父对象（我无法完全找到父对象）&我尝试过使用

$（$img）.prependTo（$（this））也失败了
我非常感谢你的帮助
a） 仅针对悬停在上方的div（主要需求），以及
b） 为新人整理东西的建议
    /*
    * 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;
    }
});

/*
*Readmore动画
*/
jQuery（文档）.ready（函数（$）{
//将readmore类添加到图像（临时，最终将以标记形式存在）
$（“.post image”）.addClass（“readmore”）；
//悬停时淡入原始图像
$（“img.readmore”）。悬停(
函数（）{
$（this.addClass（“readmore hover”）.fadeTo（“slow”，0.1）；
}，函数（）{
$（this.removeClass（“readmore hover”）.fadeTo（“fast”，1）；
}
);
//悬停时预编新图像
//我们的img是什么？
var$img=$（“”）；
//悬停时预编新图像
$（“img.readmore”）。悬停(
函数（）{
$（$img）.prependTo（“.entry content”）；
}),
函数（）{
//移除鼠标上的img；
}
});
错误发生在此$（$img）.prependTo（“.entry content”）。选择器.entry content
将选择所有条目。您应该指定所需的目标条目$this
是当前您悬停的readmore
项目。因此，您必须找到一个选择器来标识目标条目项
这将使图像进入相应的div
$( $img ).prependTo( $(this).closest(".entry-content") );

我仍在使用remove（）函数
编辑
我真的很喜欢Leglawsid选择器来删除图像，这样就完成了
<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>


jQuery（文档）.ready（函数（）{
//将readmore类添加到图像（临时，最终将以标记形式存在）
$（“.post image”）.addClass（“readmore”）；
//悬停时淡入原始图像
$（“img.readmore”）。悬停(
函数（）{
$（this.stop（）；
$（this.addClass（“readmore hover”）.fadeTo（“slow”，0.1）；
}，函数（）{
$（this.stop（）；
$（this.removeClass（“readmore hover”）.fadeTo（“fast”，1）；
}
);
//悬停时预编新图像
//我们的img是什么？
var$img=$（“”）；
//悬停时预编新图像
$（“img.readmore”）。悬停(
函数（）{
$（$img）.prependTo（$（this）.closest（“.entry content”）；
},
函数（）{
//移除鼠标上的img；
$（'插入'）.remove（）；
})
});

将您自己的图像添加到此
在悬停函数中预先显示新图像时也出现错误。第一个函数的右括号}后面紧跟着右括号）。它应该在第二个函数（删除图像）的末尾
您所称的闪烁实际上是由于在移除鼠标悬停时，没有告知您使用fadeTo（）函数启动的动画停止。所以现在发生的事情是，每次你将鼠标悬停在动画上时，你都在排队等待动画。只需在图像上运行鼠标几次，然后放开鼠标，就可以轻松检查这一点。实际上，您将看到它遍历您放入队列中的每个动画stop（）只是jQuery的动画附加功能之一
对于出现并逐渐消失的原始图像，您希望将样式设置为z-index=2。这将使淡出的图像保持在新img的前面，这样您仍然可以执行您在下面的评论中提到的点击操作
现在我真的相信这已经完成了。哈哈
太棒了
c0p
为插入的图像提供一个id，以便在删除时易于参考。然后以某种方式预处理图像，如：
$("img.readmore").hover(
  function() {
    $( $img ).prependTo($(this));
  },
  function () {
    $("img#inserted").remove();
  }
);

是否存在特定的bug，或者您是否在寻找更高效或“更好”的解决方案？你能做一个三明治吗？编辑：看到了您希望得到的帮助，JSFIDLE仍然有助于查看html的布局并公开迭代。现在将使用JSFIDLE进行一些标记。目前的具体失败点是prependTo只需要预先花费悬停在上面的.entry内容元素，而不是页面上的每一个.entry内容元素。你能提供html吗？这样我就可以为目标条目内容找到一个选择器？那么你真正想做的就是在悬停时用“more”图像替换占位符？准确地说。这就是我在最初的问题中所描述的（或试图描述的）。这里的关键问题是如何做到这一点。这将成功地遍历DOM以找到正确的元素。成功。谢谢，太好了。这正是我想要的。它引入了两个新问题：一个是我正在处理的淡入淡出/加载图像上的闪烁；第二个问题是无法点击，因为新图像位于用户指针和下图链接之间。这是一个新问题吗？哈哈，这些问题也可以解决。好的，给你。社区网站，对吗？添加$（this.stop（）；在addClass和removeClass函数之前。然后加上z指数：2；更改为每个原始图像的样式。也可以看到上面修改的最终代码。你是一个传奇！这个周末我留出时间来做这件事，但你帮我省下了时间。一旦我得到了一些声望积分，我就会回来给你送点东西。干杯