如何使jQuery代码从左侧滑动？

<html> 
<title></title> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
function animateLeft($src, $tgt){ 
    var $parent = $src.parent(); 
    var width = $parent.width(); 
    var srcWidth = $src.width(); 

    $src.css({position: 'absolute'}); 
    $tgt.hide().appendTo($parent).css({left: width, position: 'absolute'}); 

    $src.animate({left : -2000}, 1500, function(){ 
     $src.hide(); 
     $src.css({left: 2000, position: null}); 
    }); 
    $tgt.show().animate({left: 0}, 1000, function(){ 
     $tgt.css({left: null, position: null}); 
    }); 
} 



$(function(){ 
    var $first = $("#content1"); 
    var $second = $("#content2"); 
    $second.hide(); 

    $(".button1").click(function(){ 
     animateLeft($first, $second); 
     var tmp = $first; 
     $first = $second; 
     $second = tmp; 
     return false; 
    }); 
}) 

</script> 

<style type="text/css"> 


#content1 
{ 
width: 800px; 
height: 600px; 
background-color: red; 
} 

#content2 
{ 
width: 800px; 
height: 600px;  
background-color: black; 
} 
</style> 


<div id="content1"> 
<button type="button" class="button1">go to page 2</button> 


</div> 

<div id="content2"> 
<button type="button" class="button1">go back to page 2</button> 

</div> 



</body> 
</html>

因此，基本上，当你点击按钮后，一个新的div从右侧滑动，当你按下第二个div的按钮时，我想要第一个div从右侧滑回。请和谢谢如何使jQuery代码从左侧滑动？

来源

2015-08-09 Dale Flordeliz

你可以利用jQuery的.toggle()方法与slide参数。

$('.button1').click(function(){ 
    $('#content1').toggle('slide'); 
});

查看来自jQuery的documentation。和here。

来源

2015-08-09 09:50:19

如何使jQuery代码从左侧滑动？

回答

相关问题