尝试通过jquery将p
从右到左方向滑动到此slider。默认情况下,此滑块具有淡入淡出效果,我正在尝试将slideLeft效果赋予滑块的p
描述,而不是整个滑块元素。
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">
/* Description */
<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">
/* Description */
<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>
请参阅此Fiddle&gt;&gt;。我试图通过jquery来做到这一点。
我试过了这个$(".content-margin").delay(400).show("p", { direction: "left" }, 1200);
不工作,如何仅向p
元素提供slideLeft效果,有什么建议?
答案 0 :(得分:1)
headlide滑块支持可用于隐藏/滑动“p”元素的回调。
$('#headslide ul').cycle({
timeout: 4000,
pager: '#headslide .pager',
after: function(currSlideElement, nextSlideElement, options, forwardFlag){
$(nextSlideElement).find("p" ).hide();
$(nextSlideElement).find("p" ).toggle("slide");
return false;
}
jfiddle:http://jsfiddle.net/bacec898/7/