Противодействовать - PullRequest
Новая
       25

Противодействовать

1 голос
/ 22 января 2012

Так что я нашел здесь какой-то код от другого участника, который был именно тем, что мне было нужно, но я не мог всю жизнь найти, где это прокомментировать, поэтому спрашиваю здесь.

У меня есть две кнопки, каждая из которых настраивает анимацию 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 ]

1 голос
/ 22 января 2012

Обычно вы можете использовать 

$(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: относительный;"и "uniwork" и "личное дело" 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});
    });
0 голосов
/ 22 января 2012 
 $("#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});
});
...