Question

我是jQuery世界的新手，并且一直在摆弄我的代码以使其工作，到目前为止还没有成功。 jQuery不起作用，在开始时我认为它没有相应地指向index.html文件。因此更改了文件目录并多次更改了jQuery代码。还是行不通。 Css和HTML工作正常。

HTML：

<!doctype html>
<html>

    <head>
        <title>Epic Forever :: Home Page</title>
        <link rel="stylesheet" href="assets/css/style.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>

    <body>
        <section id="epic_home">
            <div id="eagleOne"></div>
            <div id="eagleTwo"></div>
        </section>

        <script src="assets/homepage.js"></script>
    </body>
</html>

CSS：

#eagleOne, #eagleTwo {
    background: url('../images/homepage-eagle.png');
    background-size: 100% 100%;
    display: block;
    height: 60%;
    left: 32%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: 20%;
    width: 36%;}

#eagleOne, #eagleTwo{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

#eagleTwo{
    display: none;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

jQuery的：

 $(document).ready(function(){
  $("#epic_home").on("mouseenter", "#eagleOne", function(){
    $("#eagleOne").fadeOut(2000);
    $("#eagleTwo").fadeIn(2000);
  });
});

enter image description here

Answer 1

你必须在#eagleOne, #eagleTwo中添加内容，这两个div实际上淡出运行但效果不显示，直到你添加内容或设置可视化你的两个div的样式，我试过

<section id="epic_home">
 <div id="eagleOne">data1</div>
 <div id="eagleTwo">data2</div>
</section>

只需在两个div中添加文字

#eagleOne, #eagleTwo {
background: url('../images/homepage-eagle.png');
background-size: 100% 100%;
display: block;
height: 60%;
left: 32%;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 20%;
width: 36%;
border:1px solid #565656; /* for visualize your div */
}

查看js小提琴演示http://jsfiddle.net/N89Aq/

FadeOut和fadeIn不工作

1 个答案: