Convert mootools to jQuery

Discussion in 'jQuery' started by thenajsays, Sep 14, 2010.

0
  1. #1
    i dont know jQuery and at this time, dont have the time to learn it... i need to convert a small snippet of code:
    
    window.addEvent('domready', function(){
        $('close').hide();
        $('navlinks').fade('hide');
        $('open').addEvent('click', function(){
            new Fx.Tween($('CCCmenu'),{
                duration:500,
                transition: 'quad:out',
                onComplete: function(){
                    $('navlinks').fade('in');
                    $('open').hide();
                    $('close').show();
                }
            }).start('top', 440);
        });
        $('close').addEvent('click', function(){
            new Fx.Tween($('navlinks'),{
                duration:500,
                transition: 'quad:out',
                onComplete: function(){
                    new Fx.Tween($('CCCmenu'),{
                        duration:500,
                        transition: 'quad:out'
                    }).start('top', 182);
                    $('close').hide();
                    $('open').show();
                }
            }).start('opacity', 0);
        });
    });
    Code (markup):
    thanks in advance
     
    thenajsays, Sep 14, 2010 IP
  2. thenajsays

    thenajsays Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok, ive made some headway in this since none could seem to help me out...
    Im still having some issues... if i leave the line "$('#links').hide();" in it hides the div element with the ID "open" but if i remove it, it works fine... please advise!

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery</title>
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
<!--
body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#page {
    width: 900px;
    position: relative;
    margin: 0 auto;
}
#myBox {
    width: 900px;
    height: 100px;
    background-color: #09F;
    position: absolute;
    z-index: 2;
}
#menu {
    width: 180px;
    padding: 0 10px 10px;
    height: 140px;
    position: absolute;
    background-color: #FF6;
    z-index: 1;
}
div#menu div#links {
    width: 180px;
    height: 100px;
    font-size: 15px;
}
#open, #close {
    width: 180px;
    height: 40px;
    font-size: 30px;
    text-align: center;
}
-->
</style>
</head>

<body>
<div id="page">    
    <div id="myBox">
    </div>
    <div id="menu">
        <div id="links">
            one<br>
            two<br>
            three<br>
            four<br>
            five
        </div>
        <div id="open">OPEN</div>
        <div id="close">CLOSE</div>
    </div>
    <script language="javascript" type="text/javascript">
        $('#links').hide();
        $('#close').hide();
        $('#open').click(function(){
            $('#menu').animate({
                top: 100,
            }, 500, function(){
                $('#close').show();
                $('#open').hide();
                $('#links').fadeIn(500);
            })
        });
        $('#close').click(function(){
            $('#menu').animate({
                top: 0,
            }, 500, function(){
                $('#open').show();
                $('#close').hide();
            })
        });
    </script>
</div>    
</body>
</html>
    Code (markup):
     
    thenajsays, Sep 15, 2010 IP
  3. thenajsays

    thenajsays Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ALSO, if i were to add some code to the close function that fades out or hides the div element with ID "links" it also will hide the div element with the ID "open"
     
    thenajsays, Sep 15, 2010 IP