CODEWITHSUNDEEP
jquery
user2510920
user2510920

Reputation: 25

Assign jQuery to a div?

I am using a jQuery script to make all images at 50% opacity on a web page. When a mouse is hovered/roll over a specific image, the opacity for that image goes back to 100%.

BEGIN SCRIPT

$(document).ready(function(){
    $('a img').animate({
        opacity:.5
    });
    $('a img').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

END of SCRIPT

I only want my portfolio/gallery images to use this code on a web page.

How can I assign this code to a particular set of images on a web page, so the other images with links will not be effected? Example: I do not want my logo and some other images with links to be effected by the jQuery code that is in the HEAD section of the web page.

Right now I can remove a link from an image to get the result I am looking for. This is not how I want the page set up and is just a temporary fix.

Thank you for your help!

Upvotes: 0

Views: 68

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206328

Let's say your gallery has an id like id="gallery"

Pure CSS3: LIVE DEMO

#gallery a img{
    opacity: 0.5;

    -webkit-transition: opacity 0.4s;
        -ms-transition: opacity 0.4s;
         -o-transition: opacity 0.4s;
            transition: opacity 0.4s;
}
#gallery a img:hover{
    opacity: 1;
}

Example using jQuery: LIVE DEMO jQuery

$(function(){

    $('#gallery a img').animate({opacity:0.5}).hover(function( e ){
        $(this).stop().animate({opacity: e.type=="mouseenter" ? 1 : 0.5 });
    });

});

you can also use fadeTo([time],[opacity]) method like:

$('#gallery a img').fadeTo(400,0.5).hover(function( e ){
    $(this).stop().fadeTo(400,e.type=="mouseenter" ? 1 : 0.5);
});

Upvotes: 1

Guerra
Guerra

Reputation: 2790

You can put a specificity class on your images which will have this behavior.

$(document).ready(function(){
    $('a img.classtoopacity').animate({
        opacity:.5
    });
    $('a img.classtoopacity').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

Upvotes: 1

Chris Rockwell
Chris Rockwell

Reputation: 1852

You can use selectors in jQuery just as you would in CSS. For example, if your gallery is

<div class="gallery"><a><img><a><img>...

You can target all images in the gallery simply by adding to your current selector:

$('.gallery a img')...

Or, to fit to your code (without knowing what wraps your gallery):

$(document).ready(function(){
  $('.gallery a img').animate({
     opacity:.5
  });
  $('.gallery a img').hover(function(){
      $(this).stop().animate({opacity:1});
  }, function(){
      $(this).stop().animate({opacity:.5});
  });
});

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

You can add a dummy class to the images that you want affected, and then include that class in the jQuery selector. So, if you give class='hover-fade' to your images, then you can use:

$(document).ready(function(){
    $('a img.hover-fade').animate({
        opacity:.5
    });
    $('a img.hover-fade').hover(function(){
        $(this).stop().animate({opacity:1});
    }, function(){
        $(this).stop().animate({opacity:.5});
    });
});

So, since your logo doesn't have that class assigned to it, it won't be effected by the script.

Upvotes: 0

Related Questions