simple Jquery hover enlarge

Question

I'm not sure where I'm going wrong. I'm trying to create a very simple hover-enlarge plugin with Jquery using the scale function. Here is my code:

$(document).ready(function(){
    $("#content img").toggle("scale",{
      percent: "80%"
    },0);
$('#content img').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).toggle("scale",{
      percent: "90%"
    },500);

}, function() {
    $(this).toggle("scale",{
      percent: "80%"
    },500);

});
});

Here's a small example: http://jsfiddle.net/8ECh6/

Here's the page: http://samples.zcardna.com/health.html

If somone knows where I've gone wrong that would awesome! THANKS!

Solution 1

Well I'm not exactly sure why your code is not working because I usually follow a different approach when trying to accomplish something similar.

But your code is erroring out.. There seems to be an issue with the way you are using scale I got the jQuery to actually execute by changing your code to the following.

$(document).ready(function(){
    $('img').hover(function() {
        $(this).css("cursor", "pointer");
        $(this).toggle({
          effect: "scale",
          percent: "90%"
        },200);
    }, function() {
         $(this).toggle({
           effect: "scale",
           percent: "80%"
         },200);

    });
});  

But I have always done it by using CSS to setup my scaling and transition..

Here is an example, hopefully it helps.

$(document).ready(function(){
    $('#content').hover(function() {
        $("#content").addClass('transition');

    }, function() {
        $("#content").removeClass('transition');
    });
});

http://jsfiddle.net/y4yAP/

Solution 2

If you have more than 1 image on the page that you like to enlarge, name the id's for instance "content1", "content2", "content3", etc. Then extend the script with this, like so:

$(document).ready(function() {
    $("[id^=content]").hover(function() {
        $(this).addClass('transition');
    }, function() {
        $(this).removeClass('transition');
    });
});

Edit: Change the "#content" CSS to: img[id^=content] to remain having the transition effects.

Comments

[jave.web]

Use #content:hover in CSS and you don't have to use jQuery/JS at all... see jsfiddle.net/en30ajh0 (toggling class on hover with JavaScript seems pretty redundant)

[anam]

@Trevor i needed some call back after transition done. i want to hide image after transition and show div with some detail something like tympanus.net/Tutorials/OriginalHoverEffects/index10.html

[Trevor]

@anam Sorry what your asking might be best answered in a new question. If you have created a question and don't get an answer right away message me the link to your question and I'll take a crack at it. Thanks