Question

我希望悬停从左右进入，然后逐渐消失它不适合我，我正在努力，但它没有修复我不知道我在编码中缺少什么我知道它简单但有时简单是最艰难的任务，我需要根据我的要求提供指导我不知道为什么它出了页面我差点按照我的潜力

<html>
    <head>
        <title> Assignment one animation</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
             $(document).ready (function(){
                $(".dd").hover (function(){
                var div = $(".dd"); 

                div.fadeOut().animate({width: "toggle"}, 5000);

                });
            });

            $(document).ready (function(){
                $(".bb").hover (function(){
                var div = $(".bb");  
                div.fadeOut().animate({width: "toggle"},  5000);


                });
            }); 

        </script>
        <style>
            .dd{
                position:absolute;
                left:0;
                top:1%;
                opacity: 0.5;
                width: 50%;
                height: 91%;
                background: #ccc;


            }
             .bb{

                position: absolute;
                left: 50%;
                right:0;
                top: 1%;
                width: 49.5%;
                height: 91.2%;
                opacity: 0.5;
                background: #ccc;
                margin-right:20px;


            } 

            #i{
                width:100%;
            }

        </style>
    </head>
    <body style="overflow-x:hidden;">
        <img id="i" src="images/3.png">
        <div class="img3">

            <div class="dd">

            </div>
            <div class="bb">

            </div>
        </div>
    </body>
</html>

Answer 1

首先，我建议你不要加入，你应该在

后更好地收费

你的意思是什么？

$(document).ready(function(){
 $('#square').hover(
  function(){
    $( "#square" ).animate({
      right: "50%",
      opacity: 0
    }, 1500 );
  }, function(){
    $( "#square" ).animate({
      right: "0",
      opacity: 1
    }, 1500 );
  }
 );
});

#square{
  position : absolute;
  right : 0;
  width : 50%;
  height : 100vh;
  background-color : #F00;
  opacity : 1;
}
#square:hover{
  cursor : pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square"></div>

你可以通过

的方式只使用CSS

#square{
  position : absolute;
  right : 0;
  width : 50%;
  height : 100vh;
  background-color : #F00;
  opacity : 1;
  transition : all 1.5s ease-in-out;
}
#square:hover{
  cursor : pointer;
  right : 50%;
  opacity : 0;
}

<div id="square"></div>

将鼠标悬停在左右横幅然后消失

1 个答案: