CODEWITHSUNDEEP
jquery
torishig
torishig

Reputation: 1

Jquery FadeTo to show hidden div

I want effect like http://www.findawayworld.com/ when you mouseover any box.

Here is my code:

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);


        });
        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();
        });

        jQuery(".category-image-block div").hide();

The effect is coming but its not giving proper effect.

My div with class 'category-image-block' contains image and another hidden div with class'contenthover'. Hidden div has p tags with text in it. Using above code, some blinking (for less than 1 sec) is happening when I mouseover p tag. Effect is not smooth as it should be. Any suggestion ?

Upvotes: 0

Views: 334

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22570

Here is almost an exact example of what they have. As I noted in comment before, pay careful attention to the css and where the element are in layout.

ALSO: scroll onto bottom of this answer for pure CSS solution (saving you time and space)

HTML 

<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.
        </p>
    </div>
</div>​

CSS 

.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
}
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.child h3 {
    font-size: 1.3em;
    text-align: center;
}
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;
}

jQuery 

$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    },
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");
    });
});​

the jsFiddle

HOWEVER

Keep in mind that this exact effect could be COMPLETELY achieved in css, thus creating a MUCH smaller footnote for your javascript. I will try to get a CSS2 and CSS3 example up shortly.

PURE CSS SOLUTION

I used the same jsFiddle for this solution (i just didn't set the modified as base, so you'll find it under modify 22). So there is one line of exception css as noted in the css below. I also commented out the JavaScript to show it is a pure CSS solution that should even have some IE compatibility.

CSS (*changes only*) 

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
}
/* End Solution */

the jsFiddle

Upvotes: 0

adeneo
adeneo

Reputation: 318172

I'd do this:

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);
});

FIDDLE

Upvotes: 0

KristianB
KristianB

Reputation: 1443

Here's the way I would solve it:

http://jsfiddle.net/6WSNq/8/

Having an inner div, that's absolute to the category-image-block makes this effect easier to obtain.

Regards

Upvotes: 1

Related Questions