jQuery幻灯片从左到右不起作用

Question

当我单击div时，我试图在jquery中从右效果向左滑动。 这是我正在使用的HTML。

<div id="myDiv" style="height: 70px; display: none; background-color:#eee; position: absolute; bottom: 1px; width: 100%">
<img style="margin-left: 9px; top: 8px; position: absolute" id="transparent-image" src="images/hover.png" alt="">
<p class="bi" style="display: inline; color: black; margin-left: 7%; position: absolute">Webbing in an alternative social network. based on intrests and interactions between people all over the world.</p>

这就是我要使用的jQuery。

$(function()
{
  $("#toggle").click(function () {
    $(".sliding").css("display","none");
    //$(".sliding").animate({left:'-240px'});
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'left' };

    // Set the duration (default: 400 milliseconds)
    var duration = 10000;

    $('#myDiv').toggle(effect, options, duration);
  });

我已经实现的是div正在显示onclick，但它并没有从左滑到右。 请帮帮我。 我感谢您的帮助。 谢谢。

我也添加了jsfiddle链接。 http://jsfiddle.net/yLyr599z/

Answer 1

我认为这是您想要的：

 $(function() { $("#toggle").click(function () { $("#myDiv").animate({right:'0'}); }); }); 

 #toggle{ position: absolute; left: 10px; bottom: 10px; cursor: pointer; } #myDiv { height: 70px; background-color:#eee; position: absolute; bottom:0; right: 100%; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="toggle"> Text to click. This will be an image though. </div> <div id="myDiv"> This text should slide out from left to right and overlap the onclick text. </div> 

一些关键的事情：

1. 在jQuery中，您需要使用animate方法。
2. 如果您希望滑入的文本与用作点击目标的文本（或图像）重叠，请按照源顺序将其放置在另一个文本的后面。 换句话说，在您的HTML示例中，将其设为第二个div。
3. myDiv的起始位置一直在屏幕外的左侧。 在CSS中，您可以执行以下操作right: 100%在定位的元素上right: 100% 。
4. 滑动元素的结束位置为right: 0因为宽度为100％。 那就是您传递给jQuery中的animate方法的值。

Answer 2

我做了一些改变。 我认为您需要的是以下功能。

  function slide(){ //$("#toggle").css({'display':'none'}); // line 1 $("#myDiv").css('display','inline'); $("#myDiv").animate({'width': 500},2000,function(){ }); // remove below and uncomment line 1 to remove the toggle div immediately $("#toggle").animate({'width': 0},2000,function(){ $("#toggle").css({'display':'none'}); }); } 

  #toggle{ position: absolute; background : red; height : 50px; } .old { position: absolute; display : none; width : 0px; height : 50px; background : green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <span> <div id="myDiv" class = "old"> This text should slide out from left to right and overlap the onclick text. </div> </span> <div id="toggle" class="sliding" onClick = "slide()" > Text to click. This will be an image though. </div> 

我认为发生在您身上的是首先发生的滑动部分，然后更改CSS属性以显示DIV。 因此，您看不到实际的滑动，但是您会在滑动之后看到它，因为显示会在滑动后影响。 但不确定是否如此。

Answer 3

 $(function() { $("#toggle").click(function () { $("#myDiv").animate(left:'0'}); }); }); 

 #toggle{ position: absolute; left: 10px; bottom: 10px; cursor: pointer; } #myDiv { height: 70px; background-color:#eee; position: absolute; bottom:0; right: 100%; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="toggle"> Text to click. This will be an image though. </div> <div id="myDiv"> This text should slide out from left to right and overlap the onclick text. </div>