我正在尝试使用slideUp()/ slideDown()为页面元素的启示设置动画,但是在相对定位的图标上有一个负面(在元素外部)放置时遇到了问题。当这些动画执行时,它会将溢出设置为隐藏渲染,我的图标会切成两半,直到动画完成。
The JSFiddle here说明了我的问题。我需要在整个动画执行过程中看到蓝色框的水平溢出,而不是在最后神奇地出现。我还需要垂直溢出才能保持隐藏状态。
我试过修改,
.menuebar {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
.mainn {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
margin: 0 auto;
padding-left: 200px;
padding-right: 200px;
max-width: 80px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
.side {
text-align: center;
}
.side > headers {
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-align: center;
}
.side > bar {
position:absolute;
left:30px; top:430px; bottom: 0;
width: 240px;
border-radius: 10px;
background-color: #0e83cd;
padding-left: 20px;
padding-right: 20px;
}
但它似乎被忽略并使用,
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntRush-Home</title>
<meta name="author" content="Ant" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/nav/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/nav/demo.css" />
<link rel="stylesheet" type="text/css" href="css/nav/component.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/nav/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<section class="color-4">
<nav class="cl-effect-2">
<a href="index.html"><span data-hover="Start">Home</span></a>
<a href="contact.html"><span data-hover="Buy">Contact</span></a>
<a href="#"><span data-hover="Pictures">Galary</span></a>
<a href="#"><span data-hover="Play">Creativity Lab</span></a>
</nav>
</section>
</div><!-- /container -->
<div class="side">
<bar>
<nav class="cl-effect-2">
<a href="index.html"><span data-hover="Info">News</span></a>
</nav>
<h4>Some Testing Text</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida</p>
</bar>
</div>
<center>
<h1>Welcome</h1>
<div id="mainn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida. </p>
<p>Enjoy your stay,</p>
<p>-Ant</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida ligula, at rutrum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultrices nulla id enim interdum, at tincidunt diam vestibulum. Sed nec velit eget ex semper blandit.
Ut tempus ornare maximus. Nunc tempor felis sit amet velit porttitor, eget interdum dui interdum. Cras nec gravida turpis. Morbi malesuada dui metus, vel aliquam augue tristique ac. Nam in erat at tortor gravida finibus. Sed ullamcorper imperdiet tellus. Nulla scelerisque lacinia mi, sed feugiat tellus consectetur sed. Fusce molestie quam et faucibus pellentesque. Suspendisse vel neque in ex placerat placerat. Phasellus congue accumsan feugiat. Integer tincidunt dignissim enim, non ornare sapien volutpat ac. Morbi tincidunt felis in libero elementum porttitor. Suspendisse faucibus venenatis suscipit. Morbi lacinia ac nibh in egestas. Curabitur accumsan mauris egestas purus efficitur rutrum.
Praesent maximus semper quam vel faucibus. Maecenas vel vehicula ipsum, eu tempor purus. Donec elementum vitae dui eu sodales. Ut eleifend erat non orci finibus, eu semper augue pharetra. Vivamus tortor dolor, faucibus id tincidunt congue, tempor at sem. Pellentesque mattis sapien ac sapien gravida consequat. Suspendisse porttitor pellentesque ipsum non rhoncus. Sed vestibulum nulla sed convallis condimentum.
Phasellus posuere dolor vitae nulla bibendum cursus ac eleifend lacus. Aliquam tempor in neque quis dictum. Mauris sed sapien vel lorem vestibulum facilisis. Fusce vulputate nulla non augue tempus commodo. Praesent elementum leo vel ultricies vulputate. Mauris at ipsum pharetra, vehicula tellus vel, pretium metus. Ut aliquet semper augue eu efficitur. Sed risus arcu, cursus et est nec, semper auctor ligula. Nulla convallis elit sodales mi pharetra, vel congue sapien euismod. Duis vehicula imperdiet ultrices.
Nunc condimentum, nulla ac ultrices ultricies, augue leo malesuada massa, in porttitor nisi tortor eu enim. Curabitur varius dolor ex, sit amet sagittis libero bibendum in. Duis et pulvinar nulla. Donec interdum id ligula a ornare. Vivamus elementum egestas fermentum. In pulvinar semper nibh a porttitor. Nulla facilisi. Proin leo mauris, finibus nec rutrum eu, egestas eget metus.</p>
</div>
</body>
</html>
也使垂直溢出可见。
非常感谢任何见解。
答案 0 :(得分:8)
将div包装成:div.clickEvent在其他div.hide中
<div class="hide"><div class="clickEvent">
...
</div>
答案 1 :(得分:4)
试试这个:
$('.clickMe').toggle(function() {
var div = $(this).parent().find("div:eq(0)").show();
var parent = div.parent();
var wrapper = $('<div>', {'class': 'hide wrapper', html: div});
parent.append(wrapper);
wrapper.slideDown({duration:1000, complete: function(){parent.append(div);wrapper.remove();}});
}, function() {
var div = $(this).parent().find("div:eq(0)");
var parent = div.parent();
var wrapper = $('<div>', {'class': 'wrapper', html: div});
parent.append(wrapper);
wrapper.slideUp({duration:"fast", complete: function(){parent.append(div);wrapper.remove();div.hide()}});
});