Javascript 如何在WordPress中将CSS3代码翻译成jQuery

我可以通过使用以下CSS3代码实现我想要的效果：

article .post-cover{
transition: opacity .9s ease-in-out;
-moz-transition: opacity .9s ease-in-out;
-webkit-transition: opacity .9s ease-in-out;
}

article:hover .post-cover{ opacity:1;}

但是，当我尝试使用以下代码将其转换为header.php文件中的jQuery时，它不起作用：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $( "article.post-cover" ).hover(function() {
    $( this ).fadeTo( "slow", 1 );
    });
</script>

$（“article.post封面”）.hover（函数（）{
美元（这一点）。法代托（“慢”，1）；
});

我也试过了，但失败了：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $( "div.post-cover" ).hover(function() { //div is the element directly
                                             //encompassing the .post-cover class
    $( this ).fadeTo( "slow", 1 );
    });
</script>

$（“div.post-cover”）.hover（function（）{//div直接是元素
//包含.post封面类
美元（这一点）。法代托（“慢”，1）；
});

我需要使用jQuery或javascript以实现兼容性，请提供帮助

我如何控制fadeTo的速度

多谢各位。

---

yulius

在CSS中，您正在将样式应用于

。将封面

张贴在

文章上

悬停。但是您的Jquery正在自己做悬停

post cover

。 试试这个：

$("article").hover(function() {       
  $('.post-cover').fadeTo( "slow", 1);
});

---

您可以尝试使用mouseenter和mouseleave事件，而不是css:hover。这是一个开始：

   $(".article").mouseenter(function() {
        $(".post-cover").css("opacity", "1").css("transition", "opacity .9s ease-in-out").css( <you other styles> );
    }).mouseleave(function() {
         $(".post-cover").css( <you non-hover-styled css here> );
    });

$（“.article”）.mouseenter（函数（）{
$（“.post cover”）.css（“不透明度”、“1”）.css（“转换”、“不透明度.9s易入易出”）.css（）；
}).mouseleave（函数（）{
$（“.post cover”）.css（）；
});

您应该能够选择要悬停的元素，并在函数内的类上调用

.fadeTo（）

。如果你想让类淡出，然后返回到完全不透明度，我会使用mouseenter&mouseleave。在

.fadeTo（）

中，您可以通过数字（毫秒）或字符串（慢/快/等）传递持续时间来控制速度和不透明度

类似于此：

$("div").mouseenter(function() {
        $(".post-cover").fadeTo( 1000, 0.5);
    }).mouseleave(function() {
         $(".post-cover").fadeTo( 1000, 1);
    });

---

就我记忆所及，jQuery的快捷方式在WordPress中不起作用。因此，您可以尝试以下方法：

jQuery( "div.post-cover" ).hover(function() { //div is the element directly
    jQuery( this ).fadeTo("slow", 1 );
});

我如何控制fadeTo的速度

来自

fadeTo的jQuery文档（字符串、数字持续时间、数字不透明度…

持续时间-确定动画将运行多长时间的字符串或数字。持续时间以毫秒为单位（如果是数字）

---

在第二个代码中，“div是直接包含.post cover类的元素”是什么意思？你能显示html吗？当我通过chrome“检查”它时，元素就是这样的：幻灯片放映的代码使用类似$（'element'）…或jQuery（“element”）的东西吗…因为我认为第一种方法不管用wordpress@bkVnet很抱歉这么晚才回复，这两天一直很忙。幻灯片代码实际上使用了$而不是jQuery。有趣的是，幻灯片可以正常工作，而此线程中建议的代码不需要在您的as WordPress中指定jQuery文件的路径jQuery附带，您还必须使用wp\u enqueue\u脚本（“jQuery”）；位于header.php文件的开头部分。很遗憾，请参见Thank you@Rajesh Kumar，这不起作用。我正在使用wordpress，我想知道这是否会导致问题？我在header.php中插入了jQuery代码。这有什么不同吗？谢谢@Hoopson2，很遗憾，这不起作用。我正在使用wordpress，我想知道这是否有问题造成问题？我在header.php中插入了jQuery代码。这有什么关系吗？@yulius我对Wordpress不是很熟悉；但是，似乎你不应该只是将jQuery添加到header.php中。你可能想查看有关如何在使用Wordpress时实现jQuery的Emples/教程。希望类似的内容可以帮助你获得更多信息tarted，.Hi@Hoopson2谢谢你的建议，我会看一看。我想采取懒散的方式毕竟有一定的局限性。当我将“div”改为“article”时，你的解决方案是有效的。实际上使用“div”也有效，但比仅使用“article”慢得多，可能是因为它在最终执行淡入淡出之前经历了很多次div。但您的解决方案的问题是，当我将鼠标悬停在一篇帖子上时，每一篇帖子都会淡入淡出。请注意，我的CSS3按照预期工作，我也在使用article.post-cover，有什么问题吗？我只希望我正在悬停的帖子淡入淡出out@yulius我从我的小提琴上复制并粘贴了代码示例，这就是为什么它仍然有“div”的原因。您可以将其更改为article，并尝试将fadeTo（）中的选择器更改为$（此）因此，它只会淡出您当时悬停的文章。谢谢@user999999，不幸的是，这不起作用。我正在使用wordpress，我想知道这是否会导致问题？我在header.php中插入了jQuery代码。这有什么关系吗？嗨@bkVnet，Hoopson2的解决方案有点起作用，您能帮我一下吗，详细信息以m为单位请用Hoopson2的解决方案回复。谢谢。

jQuery( this ).fadeTo( 1000, 1 );//fadeTo for 1 second
jQuery( this ).fadeTo( 500, 1 );//fadeTo for 500ms