1

I found a simple jquery script, that do the opacity of a image set to 0 by hovering an image from a list. I like the effect, but it is working only on 1 image in a ul packed gallery. My answer ist, how can I say to jquery, hey do this to all images in the ul, where the images are in lists listet, when I hover the the gallery div/ul?

edit: I use here two classes, grey and color. Under the grey class images is the color class image. The grey class will set to 0, then it will show up the color image. This is still working for hovering 1 image from that list, but I like to have this effect to all images together, at the same time by hovering the gallery_container div or the ul gallery. Can somebody help, how to write the jquery right for this?

HTML

<div class="gallery_container">
    <ul class="gallery">
        <li> <a href="#"><img src="images/01_grey.gif" class="grey" /></a>
            <img src="images/01_color.gif" class="color" />
        </li>
        <li> <a href="#"><img src="images/02_grey.gif" class="grey" /></a>
          <img src="images/02_color.gif" class="color" />
        </li>
    </ul>
</div>

jQuery

$(document).ready(function(){
    $("img.grey").hover(
    function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

CSS

.gallery li {
    float: left;
    margin-right: 20px;
    list-style-type: none;
    margin-bottom: 20px;
    display: block;
    height: 130px;
    width: 130px;
    position: relative;
}

img.grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

img.color {
    position: absolute;
    left: 0; top: 0;
}
Undo
  • 25,519
  • 37
  • 106
  • 129
rxjudy
  • 15
  • 4

4 Answers4

0

Try.

$(".gallery_container").hover(
function()
{
    $(this).find('img').stop().animate({"opacity": "0.5"}, "slow");
},
function()
{
    $(this).find('img').stop().animate({"opacity": "1"}, "slow");
});

See Fiddle

Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
  • The effect is still working on one image on fiddle and they dissapears, would like to have the effect to all images by hovering over the gallery div. – rxjudy Mar 13 '13 at 04:34
  • @rxjudy okay if i m not wrong now then see this fiddle.. http://jsfiddle.net/RjQTj/3/ – Dipesh Parmar Mar 13 '13 at 05:09
  • It is not what I want to 100% but it`s a very nice effect. Thank you Dipesh! – rxjudy Mar 13 '13 at 05:14
0

Here is update javascript:

$(document).ready(function(){
  $('.gallery').hover(function() {
    $('.gallery img').stop().animate({"opacity": "0"}, "slow");
  }, function() {
    $('.gallery img').stop().animate({"opacity": "1"}, "slow");
  });
}
Arman P.
  • 4,314
  • 2
  • 29
  • 47
0
Try something like this:    

$('ul.gallery li a img.grey').hover(function(e){
e.preventDefault();
...
...
});
web2008
  • 914
  • 4
  • 11
  • Can you write the full code please. Because I`ve tried and nothing has changed, maybe I wrote something wrong after your code. – rxjudy Mar 13 '13 at 04:44
0

-Edit-

OP's desired effect is grayscale<->color, not opacity.

OP's ref: http://themes.quemalabs.com/elitist/

Updated fiddle: http://jsfiddle.net/bwbNH/

OP,

From what I understand, you want to fade out all images whenever the user hovers over any of the images. While I don't know your use case, this might be confusing as it's not exactly standard. In any case, I'd suggest binding your events to the parent ul.gallery and assigning the animation to its children: $(this).children('li')

Fiddle : http://jsfiddle.net/KaZFL/

JS

$(document).ready(function () {
    $(".gallery").mouseenter(function () {
        $(this).children('li').stop().animate({
            "opacity": "0"
        }, "slow");
    }).mouseleave(function () {
        $(this).children('li').stop().animate({
            "opacity": "1"
        }, "slow");
    });
});
Community
  • 1
  • 1
couzzi
  • 6,316
  • 3
  • 24
  • 40
  • @rxjudy - you said "do this to all images in the ul" — You mean _just_ the image the user hovers over should animate? Is the issue that once you hover an image, the animate does not happen for the others? – couzzi Mar 13 '13 at 04:52
  • [This new fiddle](http://jsfiddle.net/L6pRs/) addresses the issue above. User hovers image -> fade in. User leaves image -> fade out – couzzi Mar 13 '13 at 04:56
  • Right, but I mean fade all images in by hovering the
    ...
    or the
      ...
    and fade all images out by leaving it.     – rxjudy Mar 13 '13 at 05:03
  • And [this fiddle](http://jsfiddle.net/4tJrU/) hides all *other* images when a user hover over it. Are we hot or cold? – couzzi Mar 13 '13 at 05:05
  • Yeah, it is going hot now, can you make it absolutely hot? ;) – rxjudy Mar 13 '13 at 05:07
  • I'm not entirely sure how to make your code "absolutely hot". Maybe we should start small. Which problems have been solved and which still remain? – couzzi Mar 13 '13 at 05:23
  • I have a example link: here I mean only the color changing effect on the images by hovering the portfolio_container http://themes.quemalabs.com/elitist/ – rxjudy Mar 13 '13 at 05:28
  • @rxjudy - OH, you wanted to change to **grayscale**, not toggle opacity. [This fiddle](http://jsfiddle.net/CsBQP/) changes the whole gallery from **grayscale to color** on hover. – couzzi Mar 13 '13 at 06:03
  • Yeah! This is it! I thought maybe it is possible with 2 images and with changing classes in jquery. But this is also a very nice solution! Thank you so much! :D – rxjudy Mar 13 '13 at 06:10