我正在使用 jQuery 库,因此它可用。我需要知道如何给这个页面添加滑动效果:
请注意,当您单击它时,它会淡入和淡出,但我更喜欢它滑动,我对它们的工作方式有一些了解,但以目前的编码方式,但不确定正确的技术在实现一个。什么是最简单的方法?
非常感谢。
最佳答案
据我了解您的网站,您有这段代码可以执行淡入淡出的过渡:
$('nav ul li').not('#line').click(function(){
selected = $(this).attr('id');
$('nav ul li').css({'background': '', 'color': '#999'});
$(this).css({'background': getColor(selected), 'color': '#FFF'});
$('.content').fadeOut('fast', function(){
$(this).html($('div#'+selected).html());
$(this).fadeIn('fast');
})
})
如果您想让它滑动,使用 jQuery UI 可能会更容易。如果您想要向左滑动和淡出之类的东西,那么您可以使用 jQuery UI 中的拖放过渡来完成此操作:
$('nav ul li').not('#line').click(function(){
selected = $(this).attr('id');
$('nav ul li').css({'background': '', 'color': '#999'});
$(this).css({'background': getColor(selected), 'color': '#FFF'});
$('.content').hide('drop', {direction: 'left'}, 'fast', function(){
$(this).html($('div#'+selected).html());
$(this).show('drop', {direction: 'right'}, 'fast');
})
})
我显然没有尝试在您的网站上运行这个确切的代码,但它肯定看起来像那样。
您可以在此处找到有关掉落效果的更多信息:
- > http://docs.jquery.com/UI/Effects/Drop
- > http://jqueryui.com/demos/hide/ (点击下拉菜单中的下拉)
希望这对您有所帮助。 :)
关于javascript - 我如何使用 jQuery 向我的网站添加 slider 过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7549462/