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

一些关键的事情：

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

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>

Jquery 从左向右滑动不起作用

Jquery slide from left to right not working

javascript

jquery

onclick

slide