Анимация изменения непрозрачности при зависании не работает

Question

Я хочу показать div, когда пользователь наводит элемент. Я хочу, чтобы, когда вы наводили указатель на div, отличились изменения класса div prod-desc, его непрозрачность равна 1.

Пожалуйста, помогите мне и благодарю вас в этом!

Вот 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> 

Вот JQuery:

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

Answer 1

Это легко, просто использовать в своем коде:

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

Вот пример: jsFiddle Demo

В вашем случае вы должны ссылаться на элемент по id, который является 'выдающимся'. Затем вы определяете действие, которое является зависанием и внутри функции, которую вы указываете, какой элемент и что делать, в вашем случае '.prod-desc' анимировать (изменить свойство css) на .

Не забудьте установить первоначальную CSS непрозрачности свойство .prod-убыв к чему-то ниже, чем , чтобы увидеть разницу.

Answer 2

Попробуйте использовать mouseover и mouseleave вместо:

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

Вы можете увидеть его в действии в этой скрипкой: http://jsfiddle.net/svNpQ/3/

Answer 3

Целевой элемент вы хотите присоединить обработчик события, а не элемент, который будет имеют затухающий эффект:

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

FIDDLE