Slide switch of div

来源：互联网发布：美国近期非农数据预测编辑：程序博客网时间：2024/05/16 07:47

http://jsfiddle.net/e3m7K/2/

<div id="container">    <div id="first">        This is the first div    </div>        <div id="second">        This is the second div    </div></div><div id="btnAnimate">Click here to view animation</div>

#container {height: 30px}#container div {border: 1px solid black; width: 200px}#btnAnimate {text-align: center; background-color: #DDDDDD; width : 200px; cursor: pointer; margin: 3px}

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 : -width}, 500, function(){        $src.hide();        $src.css({left: null, position: null});    });    $tgt.show().animate({left: 0}, 500, function(){        $tgt.css({left: null, position: null});    });}$(function(){    var $first = $("#first");    var $second = $("#second");    $second.hide();        $("#btnAnimate").click(function(){        animateLeft($first, $second);        var tmp = $first;        $first = $second;        $second = tmp;    });})

0 0