web-dev-qa-db-ja.com

jquery SlideToggle方向

Jquery .slideToggleをスライドさせようとしていますが、div（nav）をクリックしたときに方向を左から右または右から左に追加できません。私を助けてください、以下が私のコードです。

    <!DOCTYPE html>

<html>

<head>

  <style>

  p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;}

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body style="font-size:10px; color:#333;">

  <div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>



  <p>

    This is the paragraph to end all paragraphs.  You

    should feel <em>lucky</em> to have seen such a paragraph in

    your life.  Congratulations!

  </p>

<script>

    $("div").click(function () {

      $("p").slideToggle("slow");


    });

</script>



</body>

私はjqueryを初めて使用しました。

jqueryslidetoggle
13
Sanket

テキストに親を追加する必要があります。

<body>
   <div class="nav">Nav</div>
   <div class="text">
      <p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
   </div>
</body>

スタイル：

body {
   font-size: 10px;
   color: #333; }

.nav {
   float: right;
   width: 50px;
   height: 30px;
   text-align: center;
   background: #ccc;
   border: 1px solid #333; }

.text {
   overflow: hidden;
   float: right;
   margin: 5px;
   padding: 5px;
   width: 400px;
   background: #e4e4e4; }

そしてjavascript：

$('.nav').click(function() {
   $('.text p').css({
      'width': $('.text p').width(),
      'height': $('.text p').height()
   });
   $('.text').animate({'width': 'toggle'});
});

次の場所にデモがあります： http://jsfiddle.net/abwVd/

9
ragnar

JqueryのslideToggleのデフォルトの動作は、「上にスライド」または「下にスライド」です。あなたが欲しいなら<p>を「左にスライド」および「右にスライド」するには、jquery uiで使用可能な「スライド」効果を使用できます。方向引数は、「上」、「下」、「左」、「右」を有効な値として受け入れます。 http://docs.jquery.com/UI/Effects/Slide

3
Amrit

あなたはこれを行うことができます：

p { width:400px; position: absolute; background:#e4e4e4; margin:5px;padding:5px;}

（右フロートの代わりに絶対位置を使用）

この：

 $(document).ready(function() {
    var $elem = $("p");           
    var docwidth =  $(document).width();
    var inileft = docwidth - $elem.outerWidth();
    $elem.css("left", inileft);  //Position element tho the right
    $("div").click(function () {  //This slides
      $elem.animate({
        left: (parseInt($elem.css("left"), 10) >= docwidth ?  inileft : docwidth)
      });
   });
 });

Animateを使用すると、非常にカスタムアニメーションを作成できます。お役に立てれば。乾杯

0
Edgar Villegas Alvarado