幻灯水平从戏外div至中心？ [英] Slide div horizontally from off screen to center?
本文介绍了幻灯水平从戏外div至中心？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是在gayadesign标签使用的JavaScript
VAR TabbedContent = {
初始化：功能（）{
$（。tab_item）。鼠标指向（函数（）{ VAR背景= $（本）.parent（）找到（moving_bg）。 $（背景）.stop（）。动画（{
左：$（本）.POSITION（）['左']
}，{
持续时间：300
}）; TabbedContent.slideContent（$（本））; }）;
}，slideContent：函数（OBJ）{ 。VAR保证金= $（OBJ）.parent（）父（）找到（slide_content）宽（）;
保证金=保证金*（$（OBJ）prevAll（）尺寸（） - 1）;
保证金=保证金* -1; $（OBJ）.parent（）。父（）。找到（tabslider）。停止（）。动画（{
marginLeft：保证金+PX
}，{
持续时间：300
}）;
}
}$（文件）。就绪（函数（）{
TabbedContent.init（）;
}）;
我如何实施到所提供的HTML？
我试图模仿这一点： http://www.gayadesign.com/scripts/tabbed/
＆LT;身体GT;{块：帖子}＆LT; DIV ID =外＆GT;
{块：照片}
＆所述; IMG SRC =http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png＆GT;
＆LT; DIV ID =工具提示＆GT;＆LT; DIV CLASS =照片＆GT;
{LinkOpenTag}＆下; IMG SRC ={PhotoURL-500}ALT ={PhotoAlt}/＆GT; {LinkCloseTag}
＆LT; / DIV＆GT;
{块：标题}＆LT; DIV CLASS =标题＆GT; {图片说明}＆LT; / DIV＆GT; {/块：标题}＆LT; / DIV＆GT;
{/块：照片}
＆LT; / DIV＆GT;{/块：帖子}
＆LT; /身体GT;
解决方案
jQuery的 .animate（）功能可以激活任意CSS属性。
例如：
$（'＃ITEM1'）动画（{左：'+ = 50px的'}）;
将移动＃ITEM1 50像素的权利。您可以使用绝对数字像'50px的如果你想。
This is the javascript used in the gayadesign tabs
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();
});
How do I implement that into the provided HTML?
I am trying to imitate this: 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's .animate() function can animate any arbitrary CSS property.
For instance:
$('#item1').animate({left: '+=50px'});
Will move #item1 50px to the right. You can use absolute numbers like '50px' if you wish.
这篇关于幻灯水平从戏外div至中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
