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

我认为这就是你想要的：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

一些关键的事情：

在jQuery中，您需要使用animate方法。
如果您希望幻灯片放入的文字与您用作点击目标的文字（或图片）重叠，请将其放在源订单中的另一个之后。换句话说，在您的HTML示例中，将其设为第二个div。
myDiv的起始位置一直在屏幕左侧。在CSS中，您可以使用定位元素right: 100%执行此操作。
滑动元素的结束位置为right: 0，因为宽度为100％。这是您在jQuery中传递给animate方法的值。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我认为发生在你身上的是滑动部分首先发生并更改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从左到右滑动不起作用

3 个答案: