javascript - 4 向动画幻灯片 jQuery

Question

我正在尝试修复一个脚本，以便我可以切换另一个 div 并使用 jQuery 中的幻灯片动画显示该 div 内的内容。它根本不起作用，因此需要一些帮助。

<script type="text/javascript">
function toggleDivs(currentDiv)
{
if (currentDiv == 'music')
{
    var $inner = $("#music-box");
}
else
{
    var $inner = $("#inner");
}

if($inner.position().left == 0)
{
    $inner.animate({
        left: "400px"
    });
}
else
{
    $inner.animate({
        left: "0px"
    });
});
});
</script>

这是DIVS：

<div id="shadow"></div>
<div id="header">
    <div class="navigation">
        <a href="#" id="artist">ARTIST</a>
        <a href="#" id="music">MUSIC</a>
        <a href="#" id="about">ABOUT</a>
        <a href="#" id="contact">CONTACT</a>
    </div>
</div>
<div id="content">
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F110558300"></iframe>
    <iframe width="100%" height="166" scrollnig="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F108205158"></iframe>
    <div id="target">
        <a href="#" class="genre">Dubstep</a>
        <a href="#" class="genre">Electro House</a>
    </div>
        <div class="contentbox">
            <div id="inner">
                <div id="music-box">
            </div>
        </div>
    </div>
</div>

<div  id="footer">
    <div id="footer-widget">
        <a href="http://soundcloud.com/" target="_blank"><img src="http://dustla.com/images/soundcloud.png" alt="soundcloud"/></a>
        <a href="http://twitter.com/" target="_blank"><img src="http://dustla.com/images/twitter.png" alt="twitter"/></a>
        <a href="http://facebook.com/" target="_blank"><img src="http://dustla.com/images/facebook.png" alt="facebook"/></a>
        <a href="http://youtube.com/" target="_blank"><img     src="http://dustla.com/images/youtube.png" alt="youtube"/></a>
    </div>
</div>

这是CSS代码：

/ * ** * ** * ** * ***

        STYLESHEET


*************************/

html, body {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 auto !important;
    overflow-x: hidden;
    font-family: verdana;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

body{

}

#header
{
    width: 100%;
    height: 145px;
    background-color: #fff;
    background-image: url('http://dustla.com/images/lightpaperfibers.png');
    position: relative;
    z-index: 1;

}

#shadow
{
    width: 100%;
    height: 163px;
    background-image: url('http://dustla.com/images/h_shadow.png');
    background-repeat: repeat-x;
    position: absolute;
    z-index: 1;
    margin-top: 30px;
}

.navigation a
{
    border-bottom: 2px solid #000;
    font-family: Comic Sans MS;
    font-size: 24px;
    color: #000;
    margin-right: 50px;
    text-decoration: none;
    width: auto;
    text-align: center;
}
.navigation
{
    width: 600px;
    margin: 0 auto;
    padding-top: 50px;
}

.navigation a:hover
{
    border-bottom: 5px solid #000;
}

#content
{
    height: auto;
    position: relative;
    padding-top: 250px;
    padding-bottom: 400px;
    margin-bottom: -41px;
    width: auto;
    background-color: #ffF;
    background-image: url('http://dustla.com/images/lightpaperfibers.png');
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.contentbox
{
    width: 100%;
    background-image: url('http://dustla.com/images/lightpaperfibers.png');
    /*height: auto;
    margin-top: -780px;
    background-color: #fff;
    position: relative;
    padding-right: -200px;
    max-height: 750px;*/
    overflow: hidden;
}

#footer
{
    width: 100%;
    height: 72px;
    position: relative;
    bottom: 0;
    background-image: url('img/bg.png');
    margin: 0;
    color: #fff;
    opacity: 0.9;
    margin-top: 25px;
}

#footer-widget
{
    width: 260px;
    height: 28px;
    float: right;
    margin-right: 5px;
    margin-top: 15px;
}

#footer-widget a
{
    margin-right: 20px;
}

/*********************


    JQUERY SLIDESHOW


**********************/

#slideshow
{
    background-color: #000;
    width: 400px;
    height: 200px;
    margin: 0;
    position: relative;
}

#inner
{
    background-color: #F00;
    width: 100%;
    height: 200;
    margin: 0;
    position: absolute;
}