CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1476298
user1476298

Reputation: 17

Animate opacity change on hover not working

I want to show a div when a user hovers the element. I want that when you hover over div named distinguished the div class prod-desc changes it's opacity to 1.

Here's the HTML:

<section id="distinguished" class="four columns"> <a class="dist-img" href="#"  alt="" border="0" > <img src="images/e1.png" onClick="window.location='@Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"/> </a>
  <div class="descContent">
    <div class="distinguished-bar"> <a class="categoryMain" href="@Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"></a> <a class="btAdd" href="#" title="ADD"><span class="iconAdd"></span>
      <p>ADD</p>
      </a> </div>
    <div class="infoContent">
      <div class="prod-desc ">
        <p>Category</p>
        <p>Title</p>
        <p>Description</p>
      </div>
      <div class="prod-price">
        <div>
          <p class="priceTitle">Precio</p>
          <span class="priceRegular">$300</span></div>
      </div>
      <div class="buttonsBox"> <a class="btAddLarge hom2" id="addToCart" href="/Cart/AddToCart">
        <p>@this.Message("Add")</p>
        </a> </div>
    </div>
  </div>
</section>

Here's the jQuery:

$('.prod-desc').hover(function () {
    $('.prod-desc', this).stop().animate({
        "opacity": 1
    });
}, function () {
    $('.prod-desc', this).stop().animate({
        "opacity": 0
    });
});

Upvotes: 0

Views: 623

Answers (3)

Ilia Ross
Ilia Ross

Reputation: 13412

It's easy, just use in your code:

 $('#distinguished').hover(function() { 
    $('.prod-desc').animate({"opacity": 1}); 
 });

Here is the example: jsFiddle Demo

In your case you must refer to the element by id, which is 'distinguished'. Then you define the action which is hover and inside of the function you specify which element and what to do, in your case '.prod-desc' animate (change css property) to 1.

Remember to set initial css opacity property of .prod-desc to something lower than 1 to see the difference.

Upvotes: 0

adeneo
adeneo

Reputation: 318202

Target the element you wish to attach the event handler to, not the element that will have the fading effect :

$('#distinguished').hover(function() { 
    $('.prod-desc', this).stop().animate({"opacity": 1}); 
},function() { 
    $('.prod-desc', this).stop().animate({"opacity": 0}); 
});​

FIDDLE

Upvotes: 0

Lil&#39; Bits
Lil&#39; Bits

Reputation: 898

Try using mouseover and mouseleave instead:

$('.prod_desc').mouseover(function() {
    $(this).stop().clearQueue().animate({
        "opacity": 1
});
$('.prod_desc').mouseleave(function() {
        $(this).stop().clearQueue().animate({
            "opacity": 0
        });
    });
});​

You can see it in action in this fiddle: http://jsfiddle.net/svNpQ/3/

Upvotes: 1

Related Questions