jquery动画保证金不断增加 [英] jquery animation margin keep increasing

问题描述

嗨我正在制作幻灯片动画就像在商场入口处的那个

我有滑动部分但是我注意到的是，当我再次点击

时div1离开增加并且不会达到其默认值。当我在FF上尝试它时，它不会给出左右25％，但是当我在IE上尝试它时，它的效果非常好。



有没有人有这个想法？

Hi I''m creating a slide animation Like the one that on the entrance of a mall
I Got the sliding part but what I notice is, when I click

again div1 left Increase and won''t go to its default value. when I try it on FF it doesn''t give 25% of left and right, But when I try it on IE it works perfectly fine.

Does anybody have an idea with this?

<p>Click to slide</p>
<div id="container"style="height: 50%; width: 50%; background: #001122; position: relative; margin: 0;">		
<div id='div0' style="removed:absolute ;background: #fff333; height:70%; width:50%; margin-removed25%;">
	<span>Test</span>
</div>

<div id = 'div1' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%;" >
<h1>This will slide to the left</h1>
</div>		

<div id = 'div2' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%; removed:absolute;" >
    <h1>This will slide to the Right</h1>
    </div>		
</div>

window.onload = function()
{
	
	$(document).ready(function()
	{
		$("p").click(function()
		{	

    			if($('#container').is(':visible'))
    			{
    				$('#div1').animate({'left':'+=25%'},1000);
    				$('#div2').animate({'right':'+=25%'},1000,function()
    				{
    					$('#container').fadeOut(1000);
    				});
    			}else
    			{
    				$('#container').fadeIn(1000,function()
    				{
    					$('#div1').animate({'left':'-=25%'},1000);
    					$('#div2').animate({'right':'-=25%'},1000);
    				});					
    			}
            })
	});
}

推荐答案

（ document ）。ready（ function （）
{

(document).ready(function() {

（ p）。click（ function （）
{

if （

("p").click(function() { if(

（' ＃container').is(' ：visible'））
{

('#container').is(':visible')) {

这篇关于jquery动画保证金不断增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！