Question

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

Answer 1

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

例如：

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

将#item1 50px向右移动。如果您愿意，可以使用'50px'等绝对数字。

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

1 个答案: