I found following code in multiple places to slide left/right:
我在多个地方找到以下代码向左/向右滑动:
$('#hello').hide('slide', {direction: 'left'}, 1000);
However, i can't get it working. Here is minimalistic test which I am trying:
但是,我无法让它发挥作用。这是我正在尝试的简约测试:
<!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>
I tried it in Chrome and Safari and it doesn't work.
我在Chrome和Safari中尝试过它并不起作用。
What is the problem? Are there other working methods to slide left/right?
问题是什么?还有其他工作方法可以向左/向右滑动吗?
4 个解决方案
#1
54
$('#hello').hide('slide', {direction: 'left'}, 1000);
requires the jQuery-ui library. See http://www.jqueryui.com
$('#hello')。hide('slide',{direction:'left'},1000);需要jQuery-ui库。见http://www.jqueryui.com
#2
62
You can easy get that effect without using jQueryUI, for example:
您可以在不使用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');
}
});
});
Try this working Fiddle:
试试这个工作小提琴:
http://jsfiddle.net/ZQTFq/
#3
1
The easiest way to do so is using jQuery and animate.css animation library.
Javascript
最简单的方法是使用jQuery和animate.css动画库。使用Javascript
/* --- Show DIV --- */
$( '.example' ).removeClass( 'fadeOutRight' ).show().addClass( 'fadeInRight' );
/* --- Hide DIV --- */
$( '.example' ).removeClass( 'fadeInRight' ).addClass( 'fadeOutRight' );
HTML
HTML
<div class="example">Some text over here.</div>
Easy enough to implement. Just don't forget to include the animate.css file in the header :)
很容易实现。只是不要忘记在标题中包含animate.css文件:)
#4
1
$(document).ready(function(){
$("#left").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#left').hide("slide", { direction: "left" }, 500, function () {
$('#right').show("slide", { direction: "right" }, 500);
});
});
$("#right").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#right').hide("slide", { direction: "right" }, 500, function () {
$('#left').show("slide", { direction: "left" }, 500);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="height:100%;width:100%;background:cyan" id="left">
<h1>Hello im going left to hide and will comeback from left to show</h1>
</div>
<div style="height:100%;width:100%;background:blue;display:none" id="right">
<h1>Hello im coming from right to sho and will go back to right to hide</h1>
</div>
$("#btnOpenEditing").off('click');
$("#btnOpenEditing").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#mappingModel').hide("slide", { direction: "right" }, 500, function () {
$('#fsEditWindow').show("slide", { direction: "left" }, 500);
});
});
It will work like charm take a look at the demo.
它会像魅力一样看看演示。
#1
54
$('#hello').hide('slide', {direction: 'left'}, 1000);
requires the jQuery-ui library. See http://www.jqueryui.com
$('#hello')。hide('slide',{direction:'left'},1000);需要jQuery-ui库。见http://www.jqueryui.com
#2
62
You can easy get that effect without using jQueryUI, for example:
您可以在不使用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');
}
});
});
Try this working Fiddle:
试试这个工作小提琴:
http://jsfiddle.net/ZQTFq/
#3
1
The easiest way to do so is using jQuery and animate.css animation library.
Javascript
最简单的方法是使用jQuery和animate.css动画库。使用Javascript
/* --- Show DIV --- */
$( '.example' ).removeClass( 'fadeOutRight' ).show().addClass( 'fadeInRight' );
/* --- Hide DIV --- */
$( '.example' ).removeClass( 'fadeInRight' ).addClass( 'fadeOutRight' );
HTML
HTML
<div class="example">Some text over here.</div>
Easy enough to implement. Just don't forget to include the animate.css file in the header :)
很容易实现。只是不要忘记在标题中包含animate.css文件:)
#4
1
$(document).ready(function(){
$("#left").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#left').hide("slide", { direction: "left" }, 500, function () {
$('#right').show("slide", { direction: "right" }, 500);
});
});
$("#right").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#right').hide("slide", { direction: "right" }, 500, function () {
$('#left').show("slide", { direction: "left" }, 500);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="height:100%;width:100%;background:cyan" id="left">
<h1>Hello im going left to hide and will comeback from left to show</h1>
</div>
<div style="height:100%;width:100%;background:blue;display:none" id="right">
<h1>Hello im coming from right to sho and will go back to right to hide</h1>
</div>
$("#btnOpenEditing").off('click');
$("#btnOpenEditing").on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$('#mappingModel').hide("slide", { direction: "right" }, 500, function () {
$('#fsEditWindow').show("slide", { direction: "left" }, 500);
});
});
It will work like charm take a look at the demo.
它会像魅力一样看看演示。