0

由于 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>
4

2 回答 2

3

您是否尝试将代码包装在准备好的文档中？

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

Jquery 文档准备就绪

于 2013-05-28T09:57:35.883 回答
0

此脚本标记位于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>
于 2013-05-28T10:05:12.110 回答