Come ingrandire il contenuto div usando jquery?

Question

Ho un genitore <div>. Dentro che metto un po 'di testo e immagini. Ora ho bisogno di zoomare su una particolare porzione di quel genitore <div>. È possibile?

Answer 1

Se si vuole che l'immagine di essere ingrandita su passaggio del mouse:

$(document).ready(function() { 
$('#div img').hover(
    function() { 
     $(this).animate({ 'zoom': 1.2 }, 400); 
    }, 
    function() { 
     $(this).animate({ 'zoom': 1 }, 400); 
    }); 
}); 

o si può fare in questo modo, se si utilizza lo zoom in e out pulsanti:

$("#ZoomIn").click(ZoomIn()); 

$("#ZoomOut").click(ZoomOut()); 

function ZoomIn (event) { 

    $("#div img").width(
     $("#div img").width() * 1.2 
    ); 

    $("#div img").height(
     $("#div img").height() * 1.2 
    ); 
}, 

function ZoomOut (event) { 

    $("#div img").width(
     $("#imgDtls").width() * 0.5 
    ); 

    $("#div img").height(
     $("#div img").height() * 0.5 
    ); 
} 

Answer 2

$('image').animate({ 'zoom': 1}, 400); 

Answer 3

@ Gadde - la tua risposta è stata molto utile. Grazie! Avevo bisogno di uno zoom simile a "Maps" per un div ed ero in grado di produrre la sensazione di cui avevo bisogno con il tuo post. I miei criteri includevano la necessità di ripetere il clic e continuare a ridurre/ingrandire ogni clic. Di seguito è il mio risultato finale.

var currentZoom = 1.0; 

    $(document).ready(function() { 
     $('#btn_ZoomIn').click(
      function() { 
       $('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow'); 
      }) 
     $('#btn_ZoomOut').click(
      function() { 
       $('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow'); 
      }) 
     $('#btn_ZoomReset').click(
      function() { 
       currentZoom = 1.0 
       $('#divName').animate({ 'zoom': 1 }, 'slow'); 
      }) 
    }); 

Answer 4

utilizzato zoom-master/jquery.zoom.js. Lo zoom per l'immagine ha funzionato perfettamente. Ecco un link alla pagina. http://www.jacklmoore.com/zoom/

<script> 
    $(document).ready(function(){ 
     $('#ex1').zoom(); 

    }); 
</script>