Activate the Hover in series

Question

Staff I have the following structure:

<h2>
        <a class="imgHover" title="titulo" href="#">
            <span id="box" class="imgHover">
                <img src="imagens/estrutura.jpg" width="400" height="260" 
            alt="titulo" />
                <span class="titulo">Titulo da imagem</span>
            </span>
        </a>
    </h2>

I use the following Jquery in Hover to change the opacity.

$(document).ready(function ($) {
    var navDuration = 150;
    $('.imgHover').hover(function () {
        //$(this).children("span").stop().animate({ opacity: 1 }, navDuration);
        $(this).children("img").stop().animate({ opacity: 0.6 }, navDuration);
    }, function () {
        //$(this).children("span").stop().animate({ opacity: 0.5 }, navDuration*2);
        $(this).children("img").stop().animate({ opacity: 1 }, navDuration * 2);
    });
});

So it works cool, so I need to also change the opacity of SPAN. There when I unravel the lines that have SPAN in the script the same no longer works perfectly. What’s wrong? Thank you

Answer 1

1º Locate correct element

Assuming that the element responsible for the animation is the <a/>, your problem is the way you catch the element <span/>, because you have two elements inside the element .imgHover, will be animating the opacity of both.

This gets more complicated because a <span/> is inside the other, and the <img/> also within a <span/> which creates a huge confusion of animations of opacities.

Solution

Depending on what you intend, you should change the way you locate the <span/>:

• If you want the one next to the image:

  $(this).find('span > span')
  

• If you want what’s involving the image:

  $(this).find('> span')
  

Example

Assuming you intend to animate the image and the element next to it, your code would be:

var navDuration = 150;
$('.imgHover').hover(function() {

    var $this = $(this);

    $this.find('span > span').stop().animate({ opacity: 1 }, navDuration);
    $this.find("img").stop().animate({ opacity: 0.6 }, navDuration);

  }, function () {

    var $this = $(this);

    $this.find('span > span').stop().animate({ opacity: 0.5 }, navDuration*2);
    $this.find("img").stop().animate({ opacity: 1 }, navDuration*2);
  });

---

2º Element that should trigger the animation

Another thing is the fact that you have two elements with class .imgHover, one within the other. This makes it as if the animation occurs twice, competitively.

Solution

If you want the animation to be triggered by the element <a/>, thou shalt:

$('a.imgHover').hover(function() { ... 

If you want the animation to be triggered by the element <span/>, can:

$('span.imgHover').hover(function() { ... 

Or how you have an ID on this last element:

$('#box').hover(function() { ... 

Answer 2

You cannot do css by selecting the element directly.

imgHover:hover img {
      0% display:none ; opacity: 0;
      1% display: block ; opacity: 0;
      100% display: block ; opacity: 1;
    }