wp next_post分页幻灯片效果
首先,我不擅长 jQuery 和编码。
我使用 jQueryUI 得到了一些工作,但基本上我遇到了两个问题:
当我“隐藏”第一个 div 并将其向左滑动时,第二个 div 一段时间后就会出现(我认为是加载时间)。我想提供更多的“推”效果,显示下一个 div 在第一个 div 出去时进入。也许这可以通过某种预加载来完成。
我只能在一个方向上执行此操作(第一个 div 隐藏在左侧,第二个 div 从右侧进入)。当我单击“下一个”或“上一个”按钮时,我需要正确的方向。
这是我正在使用的JS:
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#nav-above a').live('click', function(e){e.preventDefault();var link = jQuery(this).attr('href');
jQuery('#nav-above').load(link + ' #nav-above');jQuery('#container-home').hide("slide", { direction : "left" }, 200).load(link + ' #content', function(){ jQuery('#container-home').show("slide", { direction: "right" }, 200);
});
});
});
</script>
first of all, I'm not good with jQuery and coding.
I'm trying to achieve a slide effect like this one but horizontal with jQuery.
I am under Wordpress and I'm loading 15 posts at a time (only thumbnail and title) with ajax when a user clicks on next_posts_link and previous_posts_link. I got it working using a fade effect but i can't get it working with a slide effect like in the website above.
I got something working using jQueryUI, but basically I had 2 problems:
when I "hide" the first div, sliding it to the left, the second is coming out after some time (I think is loading time). I'd like to give more the "push" effect showing the next div coming in as the first is going out. Maybe this could be done with some sort of preloading.
I can do this only in one direction (first div hiding on left side, second div coming in from right side). I need the right direction as I click on "next" or "prev" button.
This is the JS I'm using:
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#nav-above a').live('click', function(e){e.preventDefault();var link = jQuery(this).attr('href');
jQuery('#nav-above').load(link + ' #nav-above');jQuery('#container-home').hide("slide", { direction : "left" }, 200).load(link + ' #content', function(){ jQuery('#container-home').show("slide", { direction: "right" }, 200);
});
});
});
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我想你需要像 Cycle 的scrollRight 这样的东西。
看看吧,如果需要帮助,尽管说。
http://jquery.malsup.com/cycle/
I suppose you need something like Cycle's scrollRight.
Check it out, if you need any help, just say it.
http://jquery.malsup.com/cycle/