CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseenter
Marian Rehak
Marian Rehak

Reputation: 375

How to use force Jquery mouseenter fadein over again?

I'm trying to set up a menu, where a hover over a photo would show the person name and some links underneath the image-menu. I used mouseenter and fadein for the hover effect, coupled with a css class that has background color set to white (so that a new item would cover the old one). When I try to hover back to a certain menu item that has already been shown, nothing happens. Also, the hover does not work on certain items. When I hover from left, hover does not function on three items. When I hover from the right side, only the first two items work. Could you please suggest what could the issues be, and how these could be resolved? Please note that I need to have the menu that shows when mouseover shown, so that the user can click the links that will be provided there.

script:

 $(document).ready(function() {
    $("#pau").mouseenter(function(){
        $("#paup").fadeIn(600);
    });
    $("#red").mouseenter(function(){
        $("#redp").fadeIn(600);
    });
    $("#aesthet").mouseenter(function(){
        $("#aesthetp").fadeIn(600);
    });
    $("#danny").mouseenter(function(){
        $("#dannyp").fadeIn(600);
    });
    $("#kisic").mouseenter(function(){
        $("#kisicp").fadeIn(600);
    });
    $("#fake").mouseenter(function(){
        $("#fakep").fadeIn(600);
    });
    $("#kaa").mouseenter(function(){
        $("#kaap").fadeIn(600);
    });
    $("#heels").mouseenter(function(){
        $("#heelsp").fadeIn(600);
    });
    $("#hodanajan").mouseenter(function(){
        $("#hodanajanp").fadeIn(600);
    });
    $("#jakub").mouseenter(function(){
        $("#jakubp").fadeIn(600);
    });
});

HTML:

<div class='people'>
<div class='containertriangles'>
    <div class='wrap' id='aesthet'>
        <div class='crop'>
            <img src='./img/triangles/aesthet.jpg'>
        </div>
    </div>
    <div class='wrap' id='fake'>
        <div class='crop'>
            <img src='./img/triangles/afakeartist.jpg'>
        </div>
    </div>
    <div class='wrap' id='danny'>
        <div class='crop'>
            <img src='./img/triangles/dannyrose.jpg'>
        </div>
    </div>
    <div class='wrap' id='heels'>
        <div class='crop'>
            <img src='./img/triangles/heelsinprague.jpg'>
        </div>
    </div>
    <div class='wrap' id='hodanajan'>
        <div class='crop'>
            <img src='./img/triangles/hodanajan.jpg'>
        </div>
    </div>
    <div class='wrap' id='jakub'>
        <div class='crop'>
            <img src='./img/triangles/jakubmarik.jpg'>
        </div>
    </div>
    <div class='wrap' id='kaa'>
        <div class='crop'>
            <img src='./img/triangles/kaaglo.jpg'>
        </div>
    </div>
    <div class='wrap' id='pau'>
        <div class='crop'>
            <img src='./img/triangles/paulinemma.jpg'>
        </div>
    </div>
    <div class='wrap' id='red'>
        <div class='crop'>
            <img src='./img/triangles/redpoppy.jpg'>
        </div>
    </div>
    <div class='wrap' id='kisic'>
        <div class='crop'>
            <img src='./img/triangles/sandrakisic.jpg'>
        </div>
    </div>
</div>

CSS:

#aesthetp, #dannyp, #fakep, #heelsp, #hodanajanp, #jakubp, #kaap, #kisicp, #paup, #redp{
display:none;
position:absolute;
left:0;
right:0;
margin-top:-70px;
background-color:white;}

Im using this triangular layout I got from here: http://codepen.io/mikehobizal/pen/EHDsu

Your help is very appreciated.

Upvotes: 1

Views: 103

Answers (2)

Ari
Ari

Reputation: 4979

jQuery fadeIn function will only work on hidden element! So you will need to hide again after it is faded in.

This example show how to re-hide your element and then fade it in again:

$("#pau").mouseenter(function(){
    $("#paup").hide().fadeIn(600);
});

Upvotes: 0

TinMonkey
TinMonkey

Reputation: 1842

I would start by restructuring your html to utilize reusable classes instead of id's and nesting the content inside of each link so its easy to reference.

<div class='wrap link'>
    <div class='crop'>
        <img src='./img/triangles/jakubmarik.jpg'>
    </div>
    <div class="content">
      text and other stuff here
    </div>
</div>

Then you can simplify the javascript: 

$(".link").mouseenter(function(){
    $(.content').hide(); 
    $(this).find('.content').fadeIn(600);
});

This will hide all content divs and show the one nested in the div you are currently over.

You should still be able to absolute position the content divs as long as the entire nav is wrapped and has position:relative.

Upvotes: 1

Related Questions