我希望悬停从左右进入然后逐渐消失它对我不起作用我正在努力但它没有修复我不知道我在编码中遗漏了什么我知道它很简单但有时很简单是最难的任务我需要根据我的要求进行指导我不知道为什么它会超出页面我几乎根据我的潜力尝试了
<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>
最佳答案
首先我建议你不要放入，你最好先充电
你是说类似的意思吗？
$(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>关于jquery - 悬停以从左右进入横幅，然后消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49688114/