javascript - How to Slide Left to Right an Element by jquery -
trying slide h3
title right direction jquery slider. slider has fade effect default, i'm trying give slideright effect h3
title of slider.
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 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 pixel-perfect eye</a></h3> <span class="info">info</span> </span> </li> </ul> </div>
i have tried this
$(".content-margin").delay(400).show("h3", { direction: "right" }, 1200);
please see fiddle >>. i'm trying jquery.
any suggestion?
i believe close .cycle going allow.
going for.
change ".content-margin" if want else animated.
$('#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(); }); }
i can't forked fiddle link run when copy , paste code fiddle works great. .cycle doesnt allow animate, can use "before" , "after" call functions animation looking for. treats .cycle loop.
Comments
Post a Comment