jQuery Masonry和CSS3 [英] jQuery Masonry and CSS3
问题描述
如何维护砌体布局但是当前图像涉及CSS3过渡？
How do i maintain the masonry layout yet involve the CSS3 transition with the current images?
继承人我的HTML
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
$(function () {
$('#container').masonry({
columnWidth: 1,
itemSelector: 'div'
});
});
</script>
<div id="imagetrans">
<img class="bottom" src="images/eventbox2.png" />
<img class="top" src="images/eventbox.png" />
</div>
<div id="logo">
</div>
<div id="container" class="clearfix masonry">
<div class="item1"><img src="images/eventbox.png"></img></div>
<div class="item4"><img src="images/forumbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item2"><img src="images/weekbox.png"></img></div>
<div class="item3"><img src="images/top10box.png"></img></div>
<div class="item1"><img src="images/eventbox.png"></img></div>
</div>
</body>
CSS
html {
height:100%;
}
body {
width:900px;
height:100%;
margin:0 auto;
margin-top:100px;
background-image: url(images/gridbg.png);
}
#logo {
}
#container > div {
margin: 5px;
#imagetrans {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#imagetrans img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#imagetrans img.top:hover {
opacity:0;
}
我已经设法单独做两个虽然无法弄清楚我是怎么做的会把它们连在一起，这样砌筑中使用的图像会在悬停时过渡 - 对不起，如果不能这样做我仍然对这一切都是新的。
I've managed to do both separately although can't figure out how i would go about joining them together so that the images used in the masonry will transition when hovered over - sorry if this can't be done im still new to all of this.
任何想法？
推荐答案
在这里： http://jsbin.com/ifequp/2
使用演示右上角的编辑按钮查看代码。
Use the edit button in the top right corner of the demo to see the code.
jQuery Masonry不会干扰你的悬停不透明技术，所以任务就是简单地把一个放到另一个。
jQuery Masonry does not interfere with your hover-opacity technique, so the task was to simply put one into another.
下次请求帮助时，请在 http://jsbin.com 上发布您的HTML / CSS / JS a>。不要粘贴整个网站，只粘贴您遇到问题的部分。
Next time you ask for help, please publish your HTML/CSS/JS on http://jsbin.com . Don't paste your whole website, only the part you're having trouble with.
PS我发现1s过渡太令人不安了。考虑将时间缩短到0.3秒左右。
PS I find the 1s transition too disturbing. Consider lowering the time to 0.3s or so.
这篇关于jQuery Masonry和CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
