CODEWITHSUNDEEP
javascriptjqueryhovermouseoverfadeto
meneerfab
meneerfab

Reputation: 59

Jquery opacity on div hover does not work

I want to show one particular div with the use of fadeTo. If I hover over div1, then spark1 should be visible and disappear on mouseout..

But it won't do anything when hovering and I don't really know why.

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
    width:300px;
    height:300px;
}

.spark1 {
    position:absolute;
    width:27px;
    height:27px;
    margin-top:70px;
    margin-left:395px;
    background:url(../img/spark.png) no-repeat;
}

JS

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 0);
});

EDIT (update)

HTML

<div class="spark1"></div>
<div class="div1"></div>

CSS

.div1 {
width:300px;
height:300px;
background-color:#000000;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}

JS

            $('.project1').hover(function(){
                $('.spark1').fadeTo(200, 1);
            },
            function(){
                $('.spark1').fadeTo(200, 0);
            });

It still won't trigger, I don't get it..

Upvotes: 0

Views: 566

Answers (5)

dku.rajkumar
dku.rajkumar

Reputation: 18588

you should stop the animation if the event trigger before completion of previous. try this

$('.div1').hover(function(){
    $('.spark').stop(true,true).fadeTo(200, 1);
},function(){
    $('.spark').stop(true,true).fadeTo(200, 0);
});

fiddle example : http://jsfiddle.net/mK4m6/11/

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

HTML

<div class="spark1"></div>

<div class="div1">text</div>

CSS

.div1 {
width:300px;
height:300px;
}

.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}

jQuery

$('.div1').hover(function(){
    $('.spark1').fadeTo(200, 1);
},
function(){
    $('.spark1').fadeTo(200, 0);
});

Then it all works out. 1. Use correct class names 2. Set the initial opacity of spark1 to 0 3. On mouseenter fade the opacity to 1 4. On mouseleave fade the opacity to 0

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

Building on Didier's good catch of the class names, there's a problem with your hover() script. hover() can take one or two functions as arguments - if you supply just one, it's executed on both mouseover and mouseout. You'll want this, I think:

$('.div1').hover(function(){
    //fade in to 100%
    $('.spark').fadeTo(200, 100);
},
function(){

    $('.spark').fadeTo(200, 0);
});

This fades the .spark in on mousein and fades it back out on mouseout. If you want to animate on mouseout only, I'd switch from .hover() to .mouseout().

Upvotes: 0

footy
footy

Reputation: 5941

You made a mistake in your hover function. It has 2 call back methods:

$(document).ready( function() {
  $(".div1").hover(
      function(event) {
          //hover in
          $(".spark1").fadeTo(200,1);
      },
      function(event) {
          $(".spark1").fadeTo(200,0);
      });
});​

Below is a working script:

http://jsfiddle.net/U8rzJ/7/

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30676

Your code works if you use the correct css classes names

DEMO

You define a css class .spark { } but in you code you use the class name .spark1.
Choose one or the other.

Upvotes: 0

Related Questions