抵消.animate

时间：2012-01-21 21:22:58

标签： jquery jquery-animate toggle transition

所以我在这里发现了一些来自其他成员的代码，这正是我所需要的，但我不能在我的生活中找到在哪里评论，所以在这里问。

我有2个按钮设置，每个按钮动画div滑动，但我无法弄清楚每个按钮如何反转动画过渡。

    $("#university").toggle(function(){
    $("#uniwork").animate({top:"0"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
});


$("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
});

当#uniwork处于适当位置时，我希望能够按#personal来反转#uniwork div的动画并允许#personalwork div进行动画制作。

提前谢谢

HTML

<title>The Portfolio of Anthony Eamens</title>
<script type="text/javascript" src="scripts/Jquery.js"></script>
<script type="text/javascript" src="scripts/scroll.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#university").toggle(function(){
    $("#uniwork").animate({top:"0"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
});


$("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
});




});



</script>



</head>

<body>

<div id="main">
    <div id="content">
        <div id="homepage">
            <nav>   
                <ul id="navigation">
                    <li id="home"><a href="#"><img src="Images/01.png" alt="01"/><p>HOME</p></a></li>
                    <li id="about"><a href="#"><img src="Images/02.png" alt="01"/><p>ABOUT</p></a></li>
                    <li id="work"><a href="#"><img src="Images/03.png" alt="01"/><p>WORK</p></a></li>
                    <li id="contact"><a href="#"><img src="Images/04.png" alt="01"/><p>CONTACT</p></a></li>
                </ul>
            </nav>
            <div id="portfolioof">
                <img src="Images/the_portfolio_of.png" alt="The Portfolio of" width="300" height="60"/>
            </div>
            <div id="anthonyeamens">
                <img src="Images/anthonyeamens.png" alt="Anthony Eamens" width="540" height="95"/>
            </div>
            <div id="homedash">
                <ul id="homecircle">
                    <li id="graphicdesigner"><img src="Images/graphicdesigner1.png" alt="Graphic Designer"/></li>
                    <li id="macmonkey"><img src="Images/macmonkey1.png" alt="Mac Monkey"/></li>
                    <li id="totalnerd"><img src="Images/totalnerd1.png" alt="Total Nerd"/></li>
                </ul>
            </div>
        </div>
        <div id="aboutpage">
            <div id="abouttitle">
                <img src="Images/aboutme_title.png" alt="About Me" width="842" height="241"/>
            </div>  
            <div id="studentstaffs">
                <img src="Images/student_staffsuni.png" alt="Student at Staffordshire University" width="720" height="87"/>
            </div>
            <div id="aboutdash">
                <ul id="aboutcircle">
                    <li id="illustrator"><img src="Images/illustrator1.png" alt="Adobe Illustrator"/></li>
                    <li id="apple"><img src="Images/apple1.png" alt="Apple Inc"/></li>
                    <li id="coffee"><img src="Images/coffee1.png" alt="Coffee!"/></li>
                </ul>
            </div>
        </div>
        <div id="workpage">
            <ul id="workcircle">
                    <li id="university"><img src="Images/uni1.png" alt="University"/></li>
                    <li id="cv"><a href="Images/Anthony%20Eamens%20Curriculum%20Vitae.pdf"><img src="Images/CV1.png" alt="Currulum Vitae"/></a></li>
                    <li id="personal"><img src="Images/personal1.png" alt="Personal"/></li>
            </ul>
            <div id="workcontainer">
                <div id="uniwork">
                    <img id="uniworktitle" src="Images/uniwork.png" alt="University Work" width="180" height="60"/>
                    <ul id="uniwork_thumbs1">
                        <li id="thumb1"><a href="#"><img src="Images/workbox1.png" alt="Thumb 1" width="120" height="120"/></a></li>
                        <li id="thumb2"><a href="#"><img src="Images/workbox1.png" alt="Thumb 2" width="120" height="120"/></a></li>
                        <li id="thumb3"><a href="#"><img src="Images/workbox1.png" alt="Thumb 3" width="120" height="120"/></a></li>
                        <li id="thumb4"><a href="#"><img src="Images/workbox1.png" alt="Thumb 4" width="120" height="120"/></a></li>
                        <li id="thumb5"><a href="#"><img src="Images/workbox1.png" alt="Thumb 5" width="120" height="120"/></a></li>
                    </ul>
                    <ul id="uniwork_thumbs2">
                        <li id="thumb6"><a href="#"><img src="Images/workbox1.png" alt="Thumb 6" width="120" height="120"/></a></li>
                        <li id="thumb7"><a href="#"><img src="Images/workbox1.png" alt="Thumb 7" width="120" height="120"/></a></li>
                        <li id="thumb8"><a href="#"><img src="Images/workbox1.png" alt="Thumb 8" width="120" height="120"/></a></li>
                        <li id="thumb9"><a href="#"><img src="Images/workbox1.png" alt="Thumb 9" width="120" height="120"/></a></li>
                        <li id="thumb10"><a href="#"><img src="Images/workbox1.png" alt="Thumb 10" width="120" height="120"/></a></li>
                    </ul>
                </div>
                <div id="personalwork">
                    <img id="personaltitle" src="Images/personalwork.png" alt="Personal Title" width="180" height="60"/>
                    <ul id="personalwork_thumbs1">
                        <li id="thumb11"><a href="#"><img src="Images/workbox1.png" alt="Thumb 11" width="120" height="120"/></a></li>
                        <li id="thumb12"><a href="#"><img src="Images/workbox1.png" alt="Thumb 12" width="120" height="120"/></a></li>
                        <li id="thumb13"><a href="#"><img src="Images/workbox1.png" alt="Thumb 13" width="120" height="120"/></a></li>
                        <li id="thumb14"><a href="#"><img src="Images/workbox1.png" alt="Thumb 14" width="120" height="120"/></a></li>
                        <li id="thumb15"><a href="#"><img src="Images/workbox1.png" alt="Thumb 15" width="120" height="120"/></a></li>
                    </ul>
                    <ul id="personalwork_thumbs2">
                        <li id="thumb16"><a href="#"><img src="Images/workbox1.png" alt="Thumb 16" width="120" height="120"/></a></li>
                        <li id="thumb17"><a href="#"><img src="Images/workbox1.png" alt="Thumb 17" width="120" height="120"/></a></li>
                        <li id="thumb18"><a href="#"><img src="Images/workbox1.png" alt="Thumb 18" width="120" height="120"/></a></li>
                        <li id="thumb19"><a href="#"><img src="Images/workbox1.png" alt="Thumb 19" width="120" height="120"/></a></li>
                        <li id="thumb20"><a href="#"><img src="Images/workbox1.png" alt="Thumb 20" width="120" height="120"/></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="contactpage">
            <ul id="contactcircle">
                    <li id="facebook"><a href="http://www.facebook.com/profile.php?id=1169036305"><img src="Images/facebook1.png" alt="Facebook"/></a></li>
                    <li id="email"><a href="mailto:anthony.eamens@gmail.com"><img src="Images/email1.png" alt="Email"/></a></li>
                    <li id="twitter"><a href="https://twitter.com/#!/Dj_Squid2011"><img src="Images/twitter1.png" alt="Twitter"/></a></li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>

2 个答案:

答案 0 :(得分：1)

通常你可以使用

$(document).ready(function(){

    $('#button1').click(function(e){
        $('#uniwork').slideToggle();
    });

    $('#button2').click(function(e){
        $('#personalwork').slideToggle();
    });
});

请尝试以下代码段，希望这会对您有所帮助

$('#btn1').click(function(e){
    if(parseInt($('#div1').css('margin-top'))>0)
        $('#div1').animate({ 'margin-top': '0px'}, 500);
    else
        $('#div1').animate({ 'margin-top': '300px'}, 500);
});

我认为这就是你想要的

$('#university').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

$('#personal').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

请添加style =“position：relative;” “uniwork”和“personalwork”div。

这是更好的

$('#university,  #personal').click(function(e){
    if(parseInt($('#uniwork').css('top'))>0)
    {
        $('#uniwork').animate({ 'top': '0px'}, 500);
        $('#personalwork').animate({ 'top': '365px'}, 500);
    }   
    else
    {
        $('#uniwork').animate({ 'top': '365px'}, 500);
        $('#personalwork').animate({ 'top': '-365px'}, 500);
    }   
});

这有效

    $("#university, #personal").click(function(e) {

        var target=$(this).attr('id')=='university' ? 'uniwork' : 'personalwork';
        var sibling=$(this).attr('id')=='university' ? 'personalwork' : 'uniwork';
        $('#'+target).animate({top: "0"}, {duration: 300});
        $('#'+sibling).animate({top: "-330px"}, {duration: 300});
    });

答案 1 :(得分：0)

 $("#university").toggle(function(){
    $("#uniwork").animate({top:"0"},{duration:300});
    $("#personalwork").animate({top:"-330px"},{duration:300});
}, function() {
    $("#uniwork").animate({top:"-330px"},{duration:300});
    $("#personalwork").animate({top:"0"},{duration:300})
});


$("#personal").toggle(function(){
    $("#personalwork").animate({top:"0"},{duration:300});
    $("#uniwork").animate({top:"-330px"},{duration:300});
}, function() {
    $("#personalwork").animate({top:"-330px"},{duration:300});
    $("#uniwork").animate({top:"0"},{duration:300});
});
相关问题
最新问题