Come far scorrere da sinistra a destra un elemento di jquery

Question

Cercando di far scorrere h3 titolo in direzione destra da jquery a questo slider. Questo slider ha un effetto dissolvenza di default, sto provando a dare l'effetto slideRight al titolo di 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> 

Ho provato questo
$(".content-margin").delay(400).show("h3", { direction: "right" }, 1200);

Si prega di vedere questo Fiddle >>. Sto provando a farlo con jquery.

qualche suggerimento?

Answer 1

Credo che questo sia quanto di più vicino alla .cycle consentirà.
Speriamo che questo è quello che stavi per.
Modificare ".content-margin" se si desidera animare qualcos'altro.

$('#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(); 
    }); 
} 

non riesco a ottenere il link violino biforcuta a correre, ma quando ho copiare e incollare il codice nel vostro violino funziona benissimo. . Il ciclo non consente effettivamente animazioni, quindi è possibile utilizzare "prima" e "dopo" per chiamare le funzioni che eseguono l'animazione che si sta cercando. Questo tratta semplicemente come un ciclo.

Answer 2

Basta cambiare questo nel vostro CSS:

#headslide h3 { 
-webkit-animation-name:bounceInLeft; 
-moz-animation-name:bounceInLeft; 
-o-animation-name:bounceInLeft; 
animation-name:bounceInLeft; 

a questo:

#headslide h3 { 
-webkit-animation-name:bounceInRight; 
-moz-animation-name:bounceInRight; 
-o-animation-name:bounceInRight; 
animation-name:bounceInRight; 

Answer 3

basta usare questo codice jQuery

$.fn.cycle.defaults = { 
    activePagerClass: 'activeSlide', // class name used for the active pager element 
    after:   null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag) 
    allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling 
    animIn:  null, // properties that define how the slide animates in 
    animOut:  null, // properties that define how the slide animates out 
    autostop:  0,  // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 0,  // number of transitions (optionally used with autostop to define X) 
    backwards:  false, // true to start slideshow at last slide and move backwards through the stack 
    before:  function(currSlideElement, nextSlideElement, options, forwardFlag){ 
     $(".content-margin").css("margin-left",$(".content-margin").width()); 
     $(nextSlideElement).children(".content-margin").animate({"margin-left":"0px"}); 
    }, // transition callback (scope set to element to be shown):  function(currSlideElement, nextSlideElement, options, forwardFlag) 
    cleartype:  !$.support.opacity, // true if clearType corrections should be applied (for IE) 
    cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides) 
    containerResize: 1, // resize container to fit largest slide 
    continuous: 0,  // true to start next transition immediately after current one completes 
    cssAfter:  null, // properties that defined the state of the slide after transitioning out 
    cssBefore:  null, // properties that define the initial state of the slide before transitioning in 
    delay:   0,  // additional delay (in ms) for first transition (hint: can be negative) 
    easeIn:  null, // easing for "in" transition 
    easeOut:  null, // easing for "out" transition 
    easing:  null, // easing method for both in and out transitions 
    end:   null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options) 
    fastOnEvent: 0,  // force fast transitions when triggered manually (via pager or prev/next); value == time in ms 
    fit:   0,  // force slides to fit container 
    fx:   'fade',// name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle') 
    fxFn:   null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag) 
    height:  'auto',// container height (if the 'fit' option is true, the slides will be set to this height as well) 
    manualTrump: true, // causes manual transition to stop an active transition instead of being ignored 
    metaAttr:  'cycle',// data- attribute that holds the option data for the slideshow 
    next:   null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide 
    nowrap:  0,  // true to prevent slideshow from wrapping 
    onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement) 
    onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement) 
    pager:   null, // element, jQuery object, or jQuery selector string for the element to use as pager container 
    pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement) 
    pagerEvent: 'click.cycle', // name of event which drives the pager navigation 
    pause:   0,  // true to enable "pause on hover" 
    pauseOnPagerHover: 0, // true to pause when hovering over pager link 
    prev:   null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide 
    prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide 
    random:  0,  // true for random, false for sequence (not applicable to shuffle fx) 
    randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random 
    requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded 
    requeueTimeout: 250, // ms delay for requeue 
    rev:   0,  // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle) 
    shuffle:  null, // coords for shuffle animation, ex: { top:15, left: 200 } 
    slideExpr:  null, // expression for selecting slides (if something other than all children is required) 
    slideResize: 1,  // force slide width/height to fixed size before every transition 
    speed:   1000, // speed of the transition (any valid fx speed value) 
    speedIn:  null, // speed of the 'in' transition 
    speedOut:  null, // speed of the 'out' transition 
    startingSlide: 0,  // zero-based index of the first slide to be displayed 
    sync:   1,  // true if in/out transitions should occur simultaneously 
    timeout:  4000, // milliseconds between slide transitions (0 to disable auto advance) 
    timeoutFn:  null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag) 
    updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style) 
    width:   null // container width (if the 'fit' option is true, the slides will be set to this width as well) 
}; 
$('#headslide ul').cycle({ 
    fx:  'scrollRight', 
    next: '#headslide ul', 
    timeout: 4000, 
    pager: '#headslide .pager' });