我正在努力修复我的滑动效果。
我想让黄色的div向上移动200px。现在它只能向下移动40px:(
有人可以帮忙吗? http://jsfiddle.net/m3nwm63x/
我想让黄色的div向上移动200px。现在它只能向下移动40px:(
有人可以帮忙吗? http://jsfiddle.net/m3nwm63x/
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
h1 {
font-size:72px;
margin:100px 0;
}
.container {
overflow:hidden;
height: 60px;
float:left;
}
.one {
position: relative;
bottom: 0;
background-color: lightblue;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
bottom: 40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>
Let's test this!
</h1>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">I slid!
<br>And I am higher than the div before me...</div>
</div>