Jquery Slide Effect

0

I'm making a website with p5.js and jquery. It has a menu right where I put the slide effect but it has a small bug.

What I qro eh q when the user hover the mouse in the div (hover) open the menu that in the case eh the div (div-menu), but the bug eh q when I remove my mouse from the div (hover) to click on some menu field jquery closes the menu back (not qro q that happens):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>codingtrain1</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id="hover"></div>

    <div class="div-menu">
        <ul>
            <li class="div-menu-item">
                <a id="pincel" href="#"><img src="imgs/pincel.png" width="30px" height="30px"></a>
            </li>
            <li class="div-menu-item">
                <a id="hidrocor" href="#"><img src="imgs/hidrocor.png" width="30px" height="30px"></a>
            </li>
            <li class="div-menu-item">
                <a id="lapis" href="#"><img src="imgs/lapis.png" width="30px" height="30px"></a>
            </li>
            <li class="div-menu-item">
                <a id="bucket" href="#"><img src="imgs/bucket.png" width="30px" height="30px"></a>
            </li>
        </ul>
    </div>

    <script src="libraries/p5.js"></script>
    <script src="jquery-js/sketch.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="jquery-js/cod-jquery.js"></script>
</body>
</html>

CSS:

body {
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: black;
}
canvas {
    margin:auto;
}

.div-menu{
    position: absolute;
    right: 10px;
    top: 35%;
    border:1px solid aliceblue;
}

#hover{
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: aliceblue;
}

ul{
    padding: 5px;
}

.div-menu-item{
    margin: 13px auto;
    padding: 10px 10px;
    list-style-type: none;
    border: 2px solid aliceblue;
    border-radius: 50% !important;
}

.div-menu-item:hover{
    background-color: #8b8d91;
    border-radius: 5px;
}

JQuery:

var timeOut;
var close= false;

$(".div-menu").toggle("slide");
$( "#hover" ).hover(function() {
    timeOut = setTimeout(function(){
        $(".div-menu").toggle("slide");
        $("#hover").animate({
            width: '10px'
        })
        close = true;
    }, 500);
},function(){
    clearTimeout(timeOut);
    $(".div-menu").hover(function(){
        close = false;
        console.log("entrei");
    }, function(){
        close = true;
        console.log("sai");
    });

    if (close){
        console.log("entrei2");
        $(".div-menu").toggle("slide");
        $("#hover").animate({
            width: '1px'
        });
    }   
});

I noticed that if (close) {..} is running before $ (". div-menu"). hover, but I do not understand the pq, somebody can help me, I think it should be very easy to solve

    
asked by anonymous 27.08.2018 / 00:00

0 answers