CODEWITHSUNDEEP
htmljqueryjquery-eventsopacityfadein
Alex
Alex

Reputation: 242

Change opacity on hover jQuery

I have been trying to make it so that when you hover over any part in the box then the box-hover (div) will fadein to opacity 0.7 so that it looks mostly black but little transparent. But nothing I have done is working. And I don't want to assign it with ID since there will be more boxes.

Here is the code I am trying to make: http://pastebin.com/3ZRcrx57

Upvotes: 5

Views: 20683

Answers (4)

Tosh
Tosh

Reputation: 1857

Just animate it's opacity, by default set it to 0.

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});​

Upvotes: 7

Bruno Schäpper
Bruno Schäpper

Reputation: 1302

How about using a CSS only solution?

.box-hover {
    background-color: black;
    position: absolute;
    width: 290px;
    height: 185px;
    margin: 5px 5px 0 5px;
    display: none;
    opacity: 0;


    -webkit-transition: opacity 0.1s; /* Safari and Chrome */
       -moz-transition: opacity 0.1s; /* Firefox 4 */
        -ms-transition: opacity 0.1s; /* MSIE */
         -o-transition: opacity 0.1s; /* Opera */
            transition: opacity 0.1s;
}

.box:hover .box-hover {
    display: block;
    opacity: 0.7;
}

Upvotes: 3

Shivam Shah
Shivam Shah

Reputation: 524

<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
                <style type="text/css">
                        body{
                                font-family: 'Open Sans',arial,sans-serif;
                        }
                        .box{
                                width: 300px;
                                min-height: 200px;
                                background-color: #ECECEC;
                                border: 1px solid #C6C6C6;
                                border-radius: 3px;
                                text-align: left;
                                position: relative;
                        }
                        .box-hover{
                                background-color: black;
                                position: absolute;
                                width: 290px;
                                height: 185px;
                                margin: 5px 5px 0 5px;
                                top: 0; 
                                left: 0;
                                display: none;
                                opacity: 0.7;
                        }
                        .box-image{
                                margin: 5px 5px 0 5px;
                        }
                        .box-image img{
                                width: 290px;
                                height: 185px;
                        }
                        .box-text{
                                padding: 5px;
                                font-size: 13px;
                                font-weight: bold;
                                color: #262626;
                                height: 30px;
                        }
                        .box-text span{
                                font-size: 10px;
                                font-weight: normal;
                        }
                </style>
                <script type="text/javascript">
                $("document").ready(function(){
                $(".box").hover(
                        function () {
                                $(this).children('.box-hover').fadeIn(100);
                        },
                function () {
                                $(this).children('.box-hover').fadeOut(100);
                        }
                );
                });
                </script>
        </head>
        <body>
                <div class="box">
                        <div class="box-hover"></div>
                        <div class="box-image"><img src="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365"></div>
                        <div class="box-text">Theme 2.0 <br><span>Created by: <em>User</em></span></div>
                </div>
        </body>
</html>

here is the working code. next() will not work use children and use $("document").ready(function(...)};

Upvotes: 2

adeneo
adeneo

Reputation: 318182

First of all, your .box-hover element is a child, not a sibling, so next() will not work, you will have to use find() or children().

Secondly, when writing javascript case does matter, and its fadeIn and fadeOut (notice capital letters)

I think this is what you're trying to do:

$(".box").hover(function () {
    $(this).find('.box-hover').fadeIn(100);
},
function () {
    $(this).find('.box-hover').fadeOut(100);
});​

Here's a DEMONSTRATION

You could even shorten that down to:

$(".box").on('mouseenter mouseleave', function () {
    $(this).find('.box-hover').fadeToggle(100);
});​

DEMO

Upvotes: 8

Related Questions