文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >抵消.animate

问抵消.animate
EN

Stack Overflow用户
提问于 2012-01-22 05:22:58
回答 2查看 162关注 0票数 1

所以我在这里找到了另一位成员的一些代码，这正是我需要的，但我无论如何也找不到在哪里对它进行评论，所以在这里提问。

我设置了两个按钮，每个按钮都设置了一个div动画来向下滑动，但我不知道每个按钮如何反转动画过渡。

代码语言：javascript
复制
    $("#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动画。

提前谢谢你

代码语言：javascript
复制
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>
jquery
jquery-animate
toggle
transition
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-22 05:34:52

通常，您可以使用

代码语言：javascript
复制
$(document).ready(function(){

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

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

试试下面的代码片段，希望能对你有所帮助

代码语言：javascript
复制
$('#btn1').click(function(e){
    if(parseInt($('#div1').css('margin-top'))>0)
        $('#div1').animate({ 'margin-top': '0px'}, 500);
    else
        $('#div1').animate({ 'margin-top': '300px'}, 500);
});

我想这就是你想要的

代码语言：javascript
复制
$('#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“目录中。

这个比较好

代码语言：javascript
复制
$('#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);
    }   
});

这是可行的

代码语言：javascript
复制
    $("#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
EN

Stack Overflow用户

发布于 2012-01-22 06:14:52

代码语言：javascript
复制
 $("#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});
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/8956807

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档