jqueryhoverscaleimage-enlarge

simple Jquery hover enlarge


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

  • 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/