Question

我可以通过使用这个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>

我也试过这个，然后失败了：

<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>

我需要使用jQuery或javascript来实现兼容性，请帮忙。

我怎样才能控制fadeTo的速度？

谢谢。 yulius

Answer 1

在CSS中，您正在.post-cover悬停时将样式应用于article。但是你的Jquery正在自行悬停post-cover。试试这个：

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

Answer 2

您可以尝试使用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> );
    });

Answer 3

您应该能够选择要悬停的元素，并在函数内的类上调用.fadeTo()。如果你希望课程淡出然后恢复到完全不透明度，我会使用mouseenter＆amp;鼠标离开。在.fadeTo()中，您可以用数字（ms）或字符串（慢/快/等）来传递持续时间来控制速度和不透明度。

类似的东西：

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

这是Fiddle Example。

Answer 4

据我所知，jQuery的'$'快捷方式在WordPress中不起作用。所以你可能会尝试类似的东西：

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

我怎样才能控制fadeTo的速度？

来自fadeTo( String,Number duration, Number opacity...

的jQuery文档

持续时间 - 确定动画运行时间的字符串或数字。持续时间以毫秒（如果是数字）给出。

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

如何在WordPress中将CSS3代码转换为jQuery

4 个答案: