我在多个地方找到以下代码向左/向右滑动:
$('#hello').hide('slide', {direction: 'left'}, 1000);
但是,我无法让它发挥作用.这是我正在尝试的简约测试:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#test").click(function() {
$('#hello').hide('slide', {direction: 'left'}, 1000);
});
});
</script>
</head>
<body>
<article >
<div id="hello">
Hello
</div>
<p><span id="test">Test</span>
</arcticle>
</body>
我在Chrome和Safari中尝试过它并不起作用.
问题是什么？还有其他工作方法可以向左/向右滑动吗？
小智 63
您可以在不使用jQueryUI的情况下轻松获得该效果,例如:
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
});
试试这个工作小提琴:
Moo*_*man 57
$('#hello').hide('slide', {direction: 'left'}, 1000);需要jQuery-ui库.见http://www.jqueryui.com
最简单的方法是使用jQuery和animate.css动画库。
JavaScript
/* --- Show DIV --- */
$( '.example' ).removeClass( 'fadeOutRight' ).show().addClass( 'fadeInRight' );
/* --- Hide DIV --- */
$( '.example' ).removeClass( 'fadeInRight' ).addClass( 'fadeOutRight' );
超文本标记语言
<div class="example">Some text over here.</div>
很容易实施。只是不要忘记在标题中包含 animate.css 文件:)