borisverwoerd February 2016

How do I cancel a JQuery animation on a div, when another div lays over it

I try to make some kind of menu on the side of my website where a small part of the menu is showing and when you hover on it, it slides out so you can click on it. The rest of the menu is beneath the main website div and the problem is that when you hover over the div that is beneath the main website, you still activate the animation which should not happen.

<body>
    <div id="container">
        <div id="header">
            <img id="headerimg" src="pokebalicon.png" />
       </div>
       <div class="sidediv" id="first" style="margin-top: 100px;">
           <p></p>
       </div>
       <div id="mainpage">
           text
       </div>
    </div>
</body>

The CSS

#container {
    width: 820px;
    height: 700px;
    margin: 100px auto;
    position: relative;
}
#header {
    padding: 10px;
    height: 100px;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}
#mainpage {
    height: 600px;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #D5D4D4;
    position: absolute;
    pointer-events: none;
}
.sidediv{
    position: absolute;
    left: 721px;
    top: 80px;
    height: 40px;
    width: 170px;
    text-align: center;
    margin-top: 50px;
    border-radius: 0 5px 5px 0;
    background-image: url(wood.png);
    background-size: cover;
}

And my JQuery

$(document).ready(function(){
    $('#first').mouseenter(function() {
        $('#first').animate({
            left:'841px'
        });
    });
    $('#first').mouseleave(function() {
        $('#first').animate({
            left:'721px'
        });
    });
});

Anybody has an idea how to solve my problem? To clarify, here are some images

View of the menu

Answers


user3591300 February 2016

You have to change the structure of your sidediv. Basically, you're gonna have to have an element for mouse over, lets call it .arrowside and one for your content on we're making your sidediv as the parent.

<div id="container">
    <div id="header">
        <img id="headerimg" src="https://g.twimg.com/about/feature-corporate/image/typography.png" />
   </div>

    <div id="mainpage">
       text
   </div>

   <div class="sidediv" style="margin-top: 100px;">
       <span class="consentside"> asdas </span>
       <span class="arrowside">  > > > </span>
   </div>
    <div class="sidediv" style="margin-top: 150px;">
       <span class="consentside"> 4234234 </span>
       <span class="arrowside">  > > > </span>
   </div>

</div> 

also I added a little bit of css

.arrowside{
   float : right;
}

and finally your JQuery, i did a self = this so the parent element is not lost. Here's how it works; so we want for each, let's say, menu item, to have 3 elements, one is the tip of the menu and the other is the content and obviously we have the parent div. basically, mouse enters the little bit of the menu thats out, the menu then will move out and now for the menu to go back in we need to move the mouse out of the parent div.

$('.sidediv').each(function(){
    var self = this;
     $(self).find('.arrowside').mouseenter(function(){
    $(self).stop().animate({width: '390px'}, 1000);
});
    $(self).mouseleave(function(){
        $(self).stop().animate({width: '170'}, 1000)
    });

});

Here's the JSFiddle .

Post Status

Asked in February 2016
Viewed 1,689 times
Voted 6
Answered 1 times

Search




Leave an answer