将元素从margin-left:-9999px移动到页面时,如何进行平滑过渡?

时间:2014-01-05 05:04:54

标签: javascript jquery css

以下是更多细节 - 由于YouTube API的一些奇怪限制,我不得不将一个容器从页面上移开,以给人一种隐藏容器的印象。

我通过使用这个类来实现这个目标:

.my_hide{
    margin-left:-9999px;
    position:fixed !important;
}

通过使用JQuery方法$("player-list_container").removeClass("my_hide")$("player-list_container").addClass("my_hide")来控制切换。

但是,切换看起来很轻松,一旦删除了类,容器就会跳起来。我希望能够顺利地从一个州过渡到另一个州,并且不知道如何去做。

此行为can be demonstrated here

输入并搜索任何内容添加视频,然后点击下方的“播放”按钮。你应该观察所描述的行为。

4 个答案:

答案 0 :(得分:3)

Iam假设你“不能”'/'不想'手动隐藏容器但想改变它的位置,使它超出页面的边界而且它看起来是隐藏的。

在这种情况下,更改position属性肯定会给你一个跳跃而不是平滑的效果,因为这会影响页面的整个布局(Read more)。您可以改为使用CSS3动画的翻译属性来改变其位置。

这是我编写的一个演示,它完全符合您的要求。 http://codepen.io/anon/pen/EgcIi

“点击我”按钮在关闭容器和页面之间切换,并且顺利完成。您还可以调整更改容器位置所需的时间。 (截至目前为止500ms)

答案 1 :(得分:2)

  

我希望它看起来像容器正在淡入位置意味着我必须在使用任何类型的动画函数之前将容器放到该位置。

然后,不要使用CSS将元素抛出页面。将其保留原样,并使用.hide()隐藏它。然后使用.fadeIn()将其淡入。

您需要手动调整容器大小,因为它不会展开以包含隐藏元素。

答案 2 :(得分:1)

在我的屏幕上,它刚刚弹出。我不是100%确定你想要什么类型的流行音乐,但是说,请查看http://api.jquery.com/animate/

我打算编写一个示例,但该页面有一堆!

祝你好运!

PS:向下滚动查看所有可视动画示例。 以下是一些示例代码:

$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
    //add animation code here;
});

查看 粗略 小提琴。 编辑:这是一个粗略的例子:http://jsfiddle.net/somdow/Lef9n/2/

只需点击视频右侧的红色区域

即可

答案 3 :(得分:0)

jQuery中的Animate函数可以帮助你