将div从屏幕外水平滑动到中心？答案

【问题标题】：Slide div horizontally from off screen to center?将div从屏幕外水平滑动到中心？
【发布时间】：2011-06-01 17:37:56
【问题描述】：

这是在 gayadesign 选项卡中使用的 javascript

var TabbedContent = {
    init: function() {  
        $(".tab_item").mouseover(function() {

          var background = $(this).parent().find(".moving_bg");

          $(background).stop().animate({
            left: $(this).position()['left']
        }, {
            duration: 300
        });

        TabbedContent.slideContent($(this));

    });
},

slideContent: function(obj) {

    var margin = $(obj).parent().parent().find(".slide_content").width();
    margin = margin * ($(obj).prevAll().size() - 1);
    margin = margin * -1;

    $(obj).parent().parent().find(".tabslider").stop().animate({
        marginLeft: margin + "px"
    }, {
        duration: 300
    });
}
}

$(document).ready(function() {
TabbedContent.init();
});

如何在提供的 HTML 中实现它？

我正在模仿这个：http://www.gayadesign.com/scripts/tabbed/

<body>

{block:Posts}

<div id="outer">
{block:Photo}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

{/block:Posts}
</body>

【问题讨论】：

要按字面显示代码（并使其突出显示），每行缩进四个空格（或选择它并单击上面的 { } 按钮）。
哦，这对我注册时会有帮助。谢谢博尔特！
我很确定您向我们指出了一个脚本链接...您是否尝试过查看该脚本？我怀疑如果您无法理解脚本本身，那么您可能不会得到您想要的完整答案。
好吧，在此之前我实际上做了什么，是我尝试实际使用该脚本和该 HTML 来放入每个帖子。它没有用，因为我希望每个帖子都有一个单独的选项卡，以及它的作用将所有照片帖子（或与此相关的任何帖子）放在一个标签中。因此，如果我将照片放在 X div 中，它会将所有照片帖子放在该 div 中。文本/链接/视频/音乐等也是如此。我实际上想过这样做，我会的，但我只是想也许从头开始会更好。我会看一看，然后告诉你我发现了什么。

标签： jquery html css animation

【解决方案1】：

JQuery 的 .animate() 函数可以为任意 CSS 属性设置动画。

例如：

$('#item1').animate({left: '+=50px'});

将#item1 向右移动 50px。如果你愿意，你可以使用像'50px' 这样的绝对数字。

【讨论】：

鼠标悬停在图像上时我该怎么做？
看起来不错，但我的问题是我需要每个帖子都有自己的标签。因此，如果您将照片帖子的标签放在与第一个选项卡相关的一个 div 中，则所有照片帖子都将显示在该选项卡中。我需要将每个选项卡放在自己的选项卡中。这就是我从头开始构建的原因。
Tumblr 所做的是每个帖子都有自己的“块”，因此 Photo = {block:Photo} Text = {block:Text} Link = {block:Link} 等等。因此，您在页面上显示帖子的方式是将块标签放入 div。如果您将 {block:Photo} 放入显示“Hello, World!”的 div 中在您的示例中，该页面的每张照片帖子都将显示在该 div 中。我想要的是每张照片帖子、文字、链接、音乐、视频等都有自己的标签和自己的 div。
Roseannebarr.tumblr.com 的每个帖子都是分开的（现在我只为照片帖子编码，但你明白了。）