Jquery animate（）从右向左滑动

问题描述：

我们有一个应用程序已经用上滑动画实现了。但是，现在我们想要将其改为向右滑动。我们希望显示内容的幻灯片，如显示。我需要在现有代码中进行更改，这样做吗？Jquery animate（）从右向左滑动

function gallery() { 
    //if no IMGs have the show class, grab the first image 
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? 
     $('#gallery a:first') : current.next()) : $('#gallery a:first')); 

    //Get next image caption 
    var caption = next.find('img').attr('rel'); 

    //Set the fade in effect for the next image, show class has higher z-index 
    next.css({ 
     opacity: 0.0 
    }) 
    .addClass('show') 
    .animate({ 
     opacity: 1.0 
    }, 1000); 

    //Hide the current image 
    current.animate({ 
     opacity: 0.0 
    }, 1000) 
    .removeClass('show'); 

    //Set the opacity to 0 and height to 1px 
    $('#gallery .caption').animate({ 
     opacity: 0.0 
    }, { 
     queue: false, 
     duration: 0    
    }).animate({ 
     height: '1px'   
    }, { 
     queue: true, 
     duration: 300 
    }); 

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
    $('#gallery .caption').animate({ 
     opacity: 0.7 
    }, 100).animate({ 
==>  height: '20px' 
    }, 500); 

    //Display the content 
    $('#gallery .content').html(caption); 
}

此代码将内容向上滑动。我尝试过放置，

right: '700px', in the line marked with ==>

在这种情况下，看起来像第二个内容是从右到左。任何帮助是非常重要的。

由于

对不起，由于==>符号，代码被破坏。对不起。 –

如果你可以从这里删除不必要的代码部分会更好。给出示例HTML标记或设置小提琴，可以帮助您解决您的问题。 – face

你能否显示你的html标记呢？或者更好 - 创建一个当前行为的jsFiddle？ – Nina

答

在管线42尝试用width: '1px'更换线height: '1px'。只是一个想法，不能保证它会起作用。

它没有工作，因为你猜... –

它工作时，我替换，高度：'1px'与宽度：'1px'和宽度：'500px'在右边：'700px'旁边的行。 –

Jquery animate（）从右向左滑动

相关推荐