尝试通过
jquery将h3标题向右滑动到这个
slider.默认情况下,该滑块具有淡入淡出效果,我正在尝试给幻灯片效果到滑块的h3标题.
HTML：
<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>Cicero famously orated against his p...</p>
/* Title */
<h3><a href="#">Download Premium Blogger Templates</a></h3>
<span class="info">Info</span>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
<p>SEO friendly Flat style Custom Fonts.</p>
/* Title */
<h3><a href="#">Modern with a pixel-perfect eye</a></h3>
<span class="info">Info</span>
</span>
</li>
</ul>
</div>
我试过这个$(“.content-margin”).delay(400).show(“h3”,{direction：“right”},1200);
请参阅这个Fiddle>>>我试图通过jquery来做到这一点.
任何建议？
解决方法
我相信这是与.cycle将要允许的接近.
希望这是你要去的.
更改“.content-margin”,如果你想要其他的动画.
希望这是你要去的.
更改“.content-margin”,如果你想要其他的动画.
$('#headslide ul').cycle({
timeout: 4000,pager: '#headslide .pager',before: resetMe,after: slideMe
});
function resetMe() {
$(".content-margin").fadeIn();
$(".content-margin").css( "left","-=50" )
}
function slideMe() {
$(".content-margin").animate({
left: "+=50",},2000,function() {
$(".content-margin").fadeOut();
});
}
我不能得到分叉的小提琴链接运行,但是当我将代码复制并粘贴到小提琴中时,效果很好..Cycle并不真正允许动画,所以你可以使用“before”和“after”来调用你正在寻找的动画的函数.这就像循环一样.
