JQuery smooth sliding gallery

问题

Having an issue with JQuery UI slide property. This should produce a gentle slide out of the current image whilst the next image gently slides in.

$(document).ready(function(){
    $('.gallery img').hide(); $('.gallery img:first').show().addClass('galo');


    $('.galarr.r).click(function(){
        var next = $('.galo').next();
        $('.galo').hide('slide', {direction:'left'}, {duration:800, queue:false}).removeClass('galo'); $(next).show('slide', {direction:'right'}, {duration:800, queue:false}).addClass('galo');
});

});

On our website it instead slide the old one out leaving a blank space and then the next image suddenly appears.

I have set up a Fiddle that simple does not work at all despite have the same codes. What is the problem.

http://jsfiddle.net/W27YK/7/

Firebug reports that nextslide() is not a function on the fiddle when it quite clearly is.

回答1:

Here's a working jsFiddle of what I think you're trying to accomplish.

A couple things to keep in mind.

The slide effect tends to work alot better if the elements are positioned absolute. I added that to your styles for .gallery img.
Absolute positioned items work best when positioned in a parent box that is positioned relative, otherwise they are absolute to the page, instead of being absolute positioned relative to the parent (which is the intended functionality)
You'll notice that this also fixed the positioning of the right button/img, as on your sprite it was positioned 15 pixels right of the document body, not 15 pixels right of the div edge.
I noticed that your buttons were the wrong height and updated that to be the sprite image's height. For some reason it was bugging me ;).

On to the code... You're revised CSS:

.gallery { position: relative; width:700px; height:370px; border-bottom:1px solid #DDD; overflow:hidden; }
.gallery img { width:700px; height:370px; border:0px; position: absolute;}

.gallery a.galarr.l { position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) left top no-repeat; position:absolute; top:160px; left:15px; display:block;} 
.gallery a.galarr.r{ position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) right top no-repeat; position:absolute; top:160px; right:15px; display:block;}

And your revised javascript:

$(document).ready(function() {
    $('.gallery img').hide();
    $('.gallery img:first').show().addClass('galo');

    $('.galarr').click(function() {
        // one event handler to rule them all, both left and right!
        var $next, slideOutDir = '';

        // figure out what direction the images are sliding, and act accordingly.
        if ($(this).hasClass('l')) {
            slideOutDir = "right";
            // figure out rather the next slide is there, or we need to wrap to the end
            $next = $('img.galo').prev('img').length ? $('img.galo').prev('img') : $("img:last");
        }
        else {
            slideOutDir = "left";
            // figure out rather the next slide is there, or we need to wrap to the beginning
            $next = $('img.galo').next('img').length ? $('img.galo').next('img') : $(".gallery img:first");
        }

        if (!$next.length) {
            $next = $(".gallery img:first");
        }
        //$next.css('z-index', 5);
        //$('img.galo').css('z-index', 1);
        $('img.galo').hide('slide', {
            direction: slideOutDir
        }).removeClass('galo');
        $next.show('slide', {
            direction: (slideOutDir === "left" ? 'right' : 'left')
        }).addClass('galo');
    });

});

来源：https://stackoverflow.com/questions/8746017/jquery-smooth-sliding-gallery