Question

<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从右侧滑回。拜托，谢谢

Answer 1

您可以使用带有.toggle()参数的jQuery slide方法。

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

请参阅jQuery中的documentation。并here。

如何从左侧创建此jquery代码幻灯片？

1 个答案: