javascript - 元素(和动画)的垂直分布 - jQuery

Question

我想知道使用 jQuery 垂直分布元素的最干净的方法。我钉好了，但不是很干净，对吧><？我想在没有插件的情况下完成它...提前谢谢您;-)

Here my JSFiddle

jQuery(document).ready(function($) {
var gap         = 10;
var firstElem   = $('#lorem');
if(firstElem.length){
    var heightCall  = (firstElem.offset().top)+(firstElem.outerHeight())+(gap);
    var middleElem  = $('#dolore');
    middleElem.offset({top : heightCall});
    var lastElem   = $('#amet');
    var NewHeightCall  = (middleElem.offset().top)+(middleElem.outerHeight())+(gap);
    lastElem.offset({top : NewHeightCall});

    /* Animation */
    $('#lorem, #dolore, #amet').hover(
        function(){
            $(this).stop().animate({left: (($(this).offset().left)-(20))+'px',opacity:'0.5'},'slow')
        },
        function(){
            $(this).stop().animate({left: (($(this).offset().left)+(20))+'px',opacity:'1'},'slow')
    });
}

});

Answer 1

我已经摆弄了你的代码:

这是一个简化版本: HTML:

<div id="lorem" class="vertical-block">My first ID div</div>
<div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
<div id="amet" class="vertical-block">My third ID div</div>

CSS:

.vertical-block {
    position: absolute;
    padding:15px;
}
#lorem{
    top:20%;
    right:40px;
    background:#f79673;
}
#dolore{
    right:80px;
    background:#cd7454;
}
#amet{
    right:40px;
    background:#a15338;
}

.vertical-block:hover {
    opacity: 0.5;
    padding-right: 30px;
    -webkit-transition: all 2s;
    transition: all 0.4s;
}

Javascript:

jQuery(document).ready(function($) {
    var gap         = 10;
    var firstElem   = $('#lorem');
    var top = 0;

    $('.vertical-block').each(function(element){
        var $currentElement = $(this);
        if (top === 0) {
            top = $currentElement.offset().top + $currentElement.outerHeight() + gap;
        } else {
            $currentElement.offset({top: top});
            top = top + $currentElement.outerHeight() + gap;
        }
    });
});

https://jsfiddle.net/rae2x4e0/1/

现在，如果您想寻求纯 CSS 解决方案，那么:

HTML:

<div class="container">
    <div id="lorem" class="vertical-block">My first ID div</div>
    <br />
    <div id="dolore" class="vertical-block">My second ID div.<br>My second ID div. My second ID div.</div>
    <br />
    <div id="amet" class="vertical-block">My third ID div</div>
</div>

CSS:

.container {
    position-relative;
    text-align: right;
    padding-top: 10%;
}    
.vertical-block {
    padding:15px;
    display: inline-block;
    margin-top: 20px;
}
#lorem{
    right:40px;
    background:#f79673;
}
#dolore{
    right:80px;
    background:#cd7454;
}
#amet{
    right:40px;
    background:#a15338;
}

.vertical-block:hover {
    opacity: 0.5;
    padding-right: 30px;
    -webkit-transition: all 2s;
    transition: all 0.4s;
}

https://jsfiddle.net/ycdwpjxw/1/