CODEWITHSUNDEEP
jquery
user3282911
user3282911

Reputation:

jQuery hover effect doesn't work

Today I tried to use jQuery hover effect, but it didn't work as well as I expected. When I hover on div element to show other div element insted of 1st div element, they are both starting flashing.

The JS code is following.

$(document).ready(function () {
$('.section-text').hide();


$('.section-item-portal').mouseenter(function () {
    $('.section-text').fadeIn();
    $(this).fadeOut();
});

$('.section-item-portal').mouseleave(function () {
    $('.section-text').fadeOut();
    $(this).fadeIn();
}); });

Here is the link http://jsfiddle.net/DXRxA/6/

Please help to give solution to this problem.

Thanks!

Upvotes: 1

Views: 73

Answers (1)

Shomz
Shomz

Reputation: 37711

One of the solutions is to animate opacity instead - that will keep the element still occupying its original space when it becomes invisible, while if you do a fadeOut, it will get display: none which creates that undesired jumping effect you're getting.

(think display:none vs. visibility:hidden)

See the solution here:

http://jsfiddle.net/ow6o9n1t/

$(document).ready(function () {
    $('.section-text').hide();

    
    $('.section-item-portal').mouseenter(function () {
        $('.section-text').fadeIn();
        $(this).animate({opacity: 0});
    });

    $('.section-item-portal').mouseleave(function () {
        $('.section-text').fadeOut();
        $(this).animate({opacity: 1});
    });

});
.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
}
.section-text {
	position: absolute;
	width: 217px;
	background-color: rgba(0,0,0,0.53);	
	color: #fff;
	padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-item-portal">
   
</div> <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>

UPDATE

Since you said you want elements to replace each other, here is a plain CSS solution for that (of course, it would work the same way with JS, if you really want it that way): 

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
    transition: opacity .5s linear;
    z-index: 1;
}
.section-item-portal:hover {
    opacity: 0;
}
.section-text {
	position: absolute;
	width: 217px;
	background-color: rgba(0,0,0,0.53);	
	color: #fff;
	padding: 10px;
    top: 8px;
    z-index: 0;
}
<div class="section-item-portal">
   
</div> <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, </div>

Container version (selectable background text):

.section-item-portal {
    position: relative;
    width: 237px;
    height: 137px;
    background-color: #ccc;
    transition: opacity .5s linear;
    z-index: 1;
}
.container {
    display: inline-block;
}
.container:hover .section-item-portal {
    opacity: 0;
}
.container:hover .section-text {
    z-index: 2;
    opacity: 1;
}
.section-text {
    position: absolute;
    width: 217px;
    background-color: rgba(0, 0, 0, 0.53);
    color: #fff;
    padding: 10px;
    top: 8px;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s linear;
}
<div class="container">
    <div class="section-item-portal"></div>
    <div class="section-text">Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet, Lorem Ipsum Dolor Sit Amet,</div>
</div>

Upvotes: 1

Related Questions