jquery滑动切换方向_Jquery_Slidetoggle

jquery滑动切换方向

jquery

jquery滑动切换方向,jquery,slidetoggle,Jquery,Slidetoggle,我正在尝试滑动jquery.slideToggle，但我无法在单击div（导航）时添加从左到右或从右到左的方向。请帮助我，下面是我的代码 <!DOCTYPE html> <html> <head> <style> p { width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;} </style> <script s

我正在尝试滑动jquery.slideToggle，但我无法在单击div（导航）时添加从左到右或从右到左的方向。请帮助我，下面是我的代码

    <!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>


p{宽度：400px；浮点：右；背景：#e4；边距：5px；填充：5px；}
导航

这是结束所有段落的段落。你
我应该感到很幸运，能在书中看到这样一段话
你的生活。祝贺

$（“div”）。单击（函数（）{
$（“p”）。滑动切换（“慢速”）；
});

我是jquery新手，非常感谢您的帮助。

jquery中滑动切换的默认行为是“向上滑动”或“向下滑动”。如果您希望您的

能够“向左滑动”和“向右滑动”，您可以使用jquery ui中提供的“滑动”效果。direction参数接受'up'、'down'、'left'、'right'作为有效值

您可以这样做：

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

通过使用动画，您可以制作非常自定义的动画。希望这有帮助。干杯


<script>

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

      $("p").slideToggle("slow", {direction: "left"}, 100);


    });

</script>

$（“div”）。单击（函数（）{
$（“p”）。滑动切换（“慢”，方向：“左”}，100）；
});

您需要在文本中添加父项

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

还有javascript：

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

您可以在以下位置进行演示：

滑动切换的默认行为是向上滑动或向下滑动。您想让您的左右滑动吗？非常感谢您的快速回复，但这不起作用：（请参阅下面的链接）

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