父宽度的左侧动画帐户

我有一个简单的动画，我正在玩它从父元素后面滑动内容的位置。问题是我不确定在哪里解释父母的宽度。我试图把它放在声明的其他部分，但如果我这样做，那么动画只运行一次，我在哪里做到这一点，所以当动画完成后，孩子并没有隐藏在父项之后？父宽度的左侧动画帐户

JSFiddle

HTML

<div id="slideContainer"> 
    <a href="#">Start Slide</a> 
    <div id="slide"> 
     This is More Content! 
    </div> 
</div>

CSS

#slideContainer{ 
    position: relative; 
    width: 500px; 
    overflow:hidden; 
} 
#slideContainer a{ 
    display:block; 
    background-color: beige; 
    width:50px; 
    height: 50px; 
    float: left; 
    position: relative; 
    z-index: 1; 
} 
#slide{ 
    width: 200px; 
    height: 50px; 
    background-color: beige; 
    position: absolute; 
    left: -500px; 
}

jQuery的

$(document).ready(function(){ 
    $('#slideContainer a').click(function() { 
     var lefty = $(this).next(); 
     lefty.animate({ 
      left: parseInt(lefty.css('left'),10) == 0 ? 
      -lefty.width() : 
      100 
     }); 
    }); 
});

来源

2013-03-15 Derp

似乎多次运行给我 – 2013-03-15 00:21:36

@ExplosionPills不是当其他人更改为100时，它会运行一次然后停止，它不会像它应该消失。 – Derp 2013-03-15 05:08:43

刚刚从改变比较为任何你想使用的值（如100或50）。

left: parseInt(lefty.css('left'),10) == 50 ? 
-lefty.width() : 
50

http://jsfiddle.net/ExplosionPIlls/NwJTU/2/

来源

2013-03-15 05:13:08

噢好吧，你必须改变它们两个才能工作。 – Derp 2013-03-15 20:37:41

试试这个fiddle。我使用.toggleClass添加/删除类“关闭”。并用jQuery的.hasClass来决定动画。

来源

2013-03-15 08:30:26

父宽度的左侧动画帐户

回答

相关问题