抵消 .animate答案

【问题标题】：Counteract .animate抵消 .animate
【发布时间】：2012-01-21 21:22:58
【问题描述】：

所以我在这里从另一个成员那里找到了一些代码，这正是我所需要的，但我终其一生都找不到评论它的地方，所以在这里问。

我设置了 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>

【问题讨论】：

您也可以发布您的 html 吗？也许是JS Fiddle，来展示它的实际效果？
你想反转，还是停止动画？
目前按下按钮#university 将#uniwork div 向下查看与#personal 和#personalwork div 相同，我希望#university 按钮为#personalwork div 设置动画备份并显示#uniwork div，反之亦然
基本模型...将 2 个红色方块放在彼此的顶部，按“点击”将向上推“地址 1”并将“地址”向下推。 jsfiddle.net/Djsquid/jSsgM/57

标签： jquery jquery-animate toggle transition

【解决方案1】：

通常你可以使用

$(document).ready(function(){

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

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

试试下面的代码sn-p，希望对你有帮助

$('#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});
    });

【讨论】：

不是slideToggle 动画元素的高度，而不是它的位置？
你想垂直动画，我的意思是y位置吗？
我没有使用 .slidetoggle 实现正确的效果，我希望实际的 div 移动位置，而不是它已经就位并显示出来。
哦！我知道了。你能提供你的html或链接吗？
是的，只是垂直的，我目前在一个包含溢出的 div 中有 #uniwork div 和 #personalwork div：hidden 然后要求按钮显示这些 div，但同时这些按钮必须能够在视野范围内反转过渡。

【解决方案2】：

 $("#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});
});

【讨论】：

这正是我所要求的！虽然有一些我从未想过的问题..按钮成为每个div的切换，而不是#university滑动#uniwork进出以及#personalwork出，我还注意到在初始按钮按下后必须按下两次再次为不同的状态。不过谢谢你！我真的很感激它