Question

由于IE，我正试图在使用jQuery悬停时在h1上为背景颜色设置动画，但没有任何反应。我检查了我的javascript源代码，这两个链接都是正确的。我已尝试过其他属性（高度，顶部...），在其他div上，但没有任何事情发生过。我加入了我认为相关的代码部分。有谁看到了什么问题？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/WP-remivincent/wp-content/themes/data.vortex/js/ColorAnimation/jquery.animate-colors-min.js"></script>

<script> 
        $('.infos-une').hover(    
        function(){
            $(this).animate({backgroundColor: 'rgba(190,52,19,0.8)'});
        },
        function(){}  
    ); 
    </script>

</head>

<style>          // In my style.css file
.infos-une {     // it’s a <h1>
background-color: rgba(0,0,0,0.6);
color: #fff;
display: block;
height: 130px;
padding: 20px;
position: absolute;
    top: 311px;
width: 301px;
}
</style>

<section>
<div class="articles-une-container">
<div class="articles-une">
<div>
    <a href="http://localhost/WP-remivincent/article-title/">
        <img width="341" height="341" src="illustration.jpg" class="attachment-post-thumbnail wp-post-image" alt="illu-3">
        <h1 class="infos-une gd rokkit">Article title</h1>
    </a>
</div>
</div>
</div>
</section>

Answer 1

您是否尝试过准备文档中的代码？

$(document).ready(function() {
    // your code here ... 
});

Jquery document ready

Answer 2

此脚本标记位于head

中

<script> 
    $('.infos-une').hover(    
        function(){
            $(this).animate({backgroundColor: 'rgba(190,52,19,0.8)'});
        },
        function() {}  
    ); 
</script>

因此，解释该脚本时不会加载body标记。所以$('.infos-une')不会返回任何节点。您可以尝试将脚本标记移动到文档的末尾，或者将脚本包装在$.ready中，例如

<script>
    $(document).ready(function() {
        $('.infos-une').hover(    
            function(){
                $(this).animate({backgroundColor: 'rgba(190,52,19,0.8)'});
            },
            function() {}  
        );
    });
</script>

jQuery动画没有做任何事情

2 个答案: