-5

我想要两个 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;
        }

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

4

1 回答 1

3

将 Adiv添加到 wrapsocialtext和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);
    });
});
于 2013-10-25T15:43:14.943 回答