• Recent Questions
  • Popular Questions

jQuery Multiple IDs help?

I have a project Im working on that requires an image hover for multiple pictures. I got the code to work but I do not want to make it for every image instance. Instead I was trying in html an “onmousehover=”" ” but that did not work.
Here’s what I have:

$(document).ready(function() {
$(“#block11″).hover(function imgfocus(){
$(“#block11″).animate({
width: “110px”,
height: “110px”

}, 150 );
});
$(“#block11″).mouseout(function imgout(){
$(“#block11″).animate({
width: “96px”,
height: “96px”

}, 150 );
});
});

I want to get rid of “#block11″ in the selector and put “this”. But when I do that it doesn’t work when I use the onmouseover = “imgfocus();” and onmouseout = “mouseout();” functions in HTML
I have 6 different images. I just don’t want redundant coding..

    Ratchetr
    Posted 9 months ago

    First, for your calls to animate, you wouldn’t use this.animate, you would use $(this).animate. (this is going to refer to the img. But img doesn’t have a function called animate, that’s a JQuery function. So you need to convert this to a JQuery selector with $(this).

    Now you just need a selector that selects your 6 images (I assume you have other images, so you don’t want to do this for every image on the page).

    JQuery has a rich set of selectors. You aren’t limited to just “#id”.

    You could combine multiple id’s in a single selector:
    $(“#block11,#block12,#block13… ,#block16″)…

    But that’s a bit ugly, and you have to keep adding to the list if you add more images.

    You can also use starts with on the id field: Only animate things where the id starts with block1:
    $(“[id^=block1]“)

    That’s also ugly, you have to be careful what you name things, or you might animate something you don’t want to.

    I would probably use a class selector here. Add a class to each image you want to animate:
    <img class="hoverable" …

    Then use:
    $(".hoverable")

    The final code would be:
    $(document).ready(function() {
        $(".hoverable").hover(function imgfocus(){
        $(this).animate({
        width: "110px",
        height: "110px"
        }, 150 );
        });
        $(".hoverable").mouseout(function imgout(){
        $(this).animate({
        width: "96px",
        height: "96px"
        }, 150 );
        });
    });

Answer this Question :

You must be logged in to post an answer. Signup Here, it takes 5 seconds :)

Other Questions