javascript - 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% 来实现此目的。
4. 滑动元素的结束位置是 right: 0 因为宽度是 100%。这是您传递给 jQuery 中的 animate 方法的值。