-5

左側をアニメーション化する 2 つの div が必要です。

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

div1 をクリックすると、アイコンとともに左に移動するはずです。

青いボックスは右から左に移動しますが、テキストは左側にあります。私が望むのは、Follow us テキストは右側にある必要があり、クリックすると、青いボックスが動くように左に移動することです。

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;
        }

ボックスの右側に「フォローしてください」というテキストが必要です。クリックすると、アイコンとともに左に押し出されます。アイコンは最初は非表示で、「follow us」テキストをクリックすると表示されます。

4

1 に答える 1

3

divラップsocialtextとにAを追加し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 に答える