0

右側のリンクのコンテンツの 1 つをクリックすると左にスライドするときに、左側に単純な Web サイト メニューのみが必要です。

ここで働くフィドル

html

<div class="contentLeft">
        <ul>
            <li><a class="selectBox" href="#">sample</a></li>
            <li><a class="selectBox" href="#">sample1</a></li>
            <li><a class="selectBox" href="#">sample2</a></li>
        </ul>    

    </div>

<div class="contentRight">
    <div class="selectBoxContent">its</div>
    <div class="selectBoxContent">my</div>
    <div class="selectBoxContent">way</div>
</div>

jquery

$(function() {

            $('.selectBox').click(function() {
         $('.selectBoxContent').slideLeft('fast');
        return false;

    });
        });

CSS

.contentLeft {
    border:1px solid green;
    width:30%;
    float:left;
}

.contentRight {
    border:1px solid red;
    width:64%; 
    float:right;
    height:400px;
}
.selectBoxContent {
    width:100%;
    height:400px;
    display:none;
}
4

2 に答える 2

0

スライドではなく、.animateを使用できます。だから何かのような

JQuery 

$(function() {
  $('.selectBox').click(function() {
    $('.selectBoxContent').fadeIn().animate({
      right: "0"
     }, 1000);
    return false;
  });
});

CSS 

.contentRight {
    border:1px solid red;
    width:64%; 
    float:right;
    height:400px;
    overflow: hidden;
    position: relative;
}

.selectBoxContent {
    width:100%;
    height:400px;
    display:none;
    right: -100%;
    position: relative;
}
于 2013-02-21T06:04:40.610 に答える
0

jQuery UI - Slide Effectを使用することで、これを実現できます。

jQuery :

 $('.selectBoxContent').toggle( "slide" );
    return false;
 });

デモを見る

于 2013-02-21T06:40:14.760 に答える