Question

我想要两个div来为左侧制作动画。

div1 - contains text - float left
div2 - contains icons - float left

一旦我点击div1，它应该向左移动图标。

蓝色框从右向左移动，但文字跟随我们在左侧。我想要的是跟随我们文本应该在右侧，一旦我点击它然后它应该向左移动像蓝框移动。

HTML

<div id="footer">
    <div class="socialtext">Follow us</div>
    <div class="socailicons">
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
    </div>
</div>

JS

    $(document).ready(function() {
   $('.socialtext').click(function () {
        $('.socailicons').toggle("slide", {
            direction: "right"
        }, 1000);
    });
});

CSS

#footer{
            width: 300px;
            border: 1px solid #FF0000;
            height: 35px;
        }
        .socialtext{
            width: 100px;
            float:left;
        }
        .socailicons{
            width: auto;
            display:none;
            float:left;
        }
        .icon{
            width: 10px;
            height: 10px;
            background: none repeat scroll 0 0 #0769AD;
            float:left;
            margin: 10px;
        }

我想在框的右侧显示“关注我们”文字，当点击它时，它会被图标推到左侧。图标将最初隐藏，点击“关注我们”文字即可显示。

Answer 1

添加div以包裹socialtext和socailicons，以便它们可以轻松地移动到一起。

<强> HTML

<div id="footer">
    <div id="wrapper">
    <div class="socialtext">Follow us</div>
    <div class="socailicons">
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
        <div class="icon">&nbsp;</div>
    </div>
    </div>
</div>

float: left;更改为display: inline;，以便元素更具动态性。

<强> CSS

#footer {
    width: 300px;
    border: 1px solid #FF0000;
    height: 35px;
    overflow: hidden;    /* hide the div that is out of the border */
}
#wrapper {
    position: relative;
    right: -200px;    /* move it to the right so that 
                        .socialicons is out of the border */
}
.socialtext {
    width: 100px;
    display: inline-block;
}
.socailicons {
    display: inline;
}
.icon {
    width: 10px;
    height: 10px;
    background: none repeat scroll 0 0 #0769AD;
    display: inline-block;
    margin: 10px;
}

使用.animate()代替移动它。

JS

$(document).ready(function() {
    var isShown = false;
    $('.socialtext').click(function() {
        // toggle moving left and right
        var offset = isShown? "-=200px": "+=200px";
        isShown = !isShown;
        $('#wrapper').animate({"right": offset}, 1000);
    });
});

动画两个div左侧

1 个答案: