这是 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>
最佳答案
JQuery 的 .animate()函数可以为任意 CSS 属性设置动画。
例如:
$('#item1').animate({left: '+=50px'});
会将 #item1 向右移动 50px。如果您愿意，可以使用绝对数字，例如 '50px'。
关于jquery - 将 div 从屏幕外水平滑动到中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4565778/