Enable the serial hover

Question

Enable the serial hover

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Personal 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 the 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);
    });
});

This works fine, so I also need to change the opacity of SPAN. When I uncomment the lines that have the SPAN in the script the same does not work more perfectly. What is wrong? Thanks

jquery

asked by anonymous 29.03.2015 / 04:41

2 answers

1

You can not do in css by selecting the element directly.

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

29.03.2015 / 05:54

Android Toolbar hide Search when it's open How to integrate a MySQL database with a C # application?

score 1 · Accepted Answer

1st Find correct element

Assuming the animation element is <a/> , your problem is how you get the  element, because since you have two elements inside the .imgHover element, you're animating the opacity of both .

This is more complicated because one  is within the other, and <img/> is also inside a  which generates a huge confusion of opacity animations.

Solution

Depending on what you want, you should change the way you find  :

If you want to be next to the image:
```
$(this).find('span > span')
```
If you want to get the image involved:
```
$(this).find('> span')
```

Example

Assuming you want to animate the image and element next to it, your code would look like:

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);
  });

2nd Element that should trigger the animation

Another thing is that you have two elements with the class .imgHover , one inside the other. This makes the animation happen twice, competitively.

Solution

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

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

If you want the animation to be triggered by the  element, you can:

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

Or you have an ID on this last element:

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