如何使用jQuery实现元素从左侧滑动到右侧

Question

如何使用jQuery实现元素从左侧滑动到右侧

11

尝试使用jQuery将幻灯片中的

标题向右滑动，以应用slideRight效果。此幻灯片默认使用淡出效果。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 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实现此操作。

有什么建议吗？

- Aariba

3个回答

1

只需使用这个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' });

- PRASANTH

谢谢，但是我只想滑动h3标题元素，而不是整个滑块。 - Aariba

所有的h3内容是否应该使用相同的图片？ - PRASANTH

如何仅滑动 h3 标题元素？ - Aariba

嗨@Aabira，我已经更新了H3幻灯片效果的代码。使用的选项是获取回调方法“before”，该方法在幻灯片转换时触发。 - PRASANTH

很好，看到你的fiddle：http://jsfiddle.net/bacec898/11/ 它没有正常工作，不是每次都滑动，它应该只滑动h3元素，而不是其他元素。 - Aariba

1

我相信这是.cycle所能实现的最接近的效果。
希望这就是您想要的效果。
如果您想要动画其他内容，请更改“.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();
     });
}

我无法运行分叉的fiddle链接，但当我将代码复制粘贴到您的fiddle中时，它可以正常工作。 Cycle不太允许动画，所以你可以使用“before”和“after”来调用执行你想要的动画的函数。这只是像循环一样处理.cycle。

- Tofu Warrior

嗨，它不工作/不滑动，请检查你的fiddle。 - Aariba

抱歉，由于某些原因，分叉的代码片段无法正确运行。只需将我的JavaScript复制并粘贴到您的代码片段中即可正常工作！ - Tofu Warrior

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tico · Accepted Answer

只需在您的 CSS 中更改此内容：

：

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

转换为：

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